import * as React from "react";
import { useEffect, useState } from "react";
import MatchSizes from "./MatchSizes";
import MatchProperties from "./MatchProperties";
import { makeStyles, Text, Subtitle1, tokens, Theme } from "@fluentui/react-components";

interface AppProps {
  title: string;
}

const useStyles = makeStyles({
  root: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    padding: "16px",
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
    backgroundColor: tokens.colorNeutralBackground1,
    overflow: "auto",
  },
  section: {
    marginBottom: "24px",
    padding: "12px",
    borderRadius: "8px",
    backgroundColor: tokens.colorNeutralBackground2,
    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)",
    transition: "all 0.2s ease",
    ":hover": {
      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
    },
  },
  sectionTitle: {
    marginBottom: "12px",
    fontWeight: tokens.fontWeightSemibold,
    color: tokens.colorBrandForeground1,
  },
  footer: {
    fontSize: "12px",
    color: tokens.colorNeutralForeground3,
    textAlign: "center",
    marginTop: "auto",
    padding: "8px 0",
  },
});

const App: React.FC<AppProps> = () => {
  const styles = useStyles();
  const [theme, setTheme] = useState<string>("light");
  
  // Check if macOS is in dark mode (would need to be expanded in production)
  useEffect(() => {
    // In a real implementation, we would listen to Office theme changes
    const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
    setTheme(prefersDarkMode ? "dark" : "light");
  }, []);

  return (
    <div className={styles.root} data-theme={theme}>
      <div className={styles.section}>
        <Subtitle1 block className={styles.sectionTitle}>
          Shape Tools
        </Subtitle1>
        <MatchSizes />
        <div style={{ marginTop: "8px" }}></div>
        <MatchProperties />
      </div>
      
      <div className={styles.footer}>
        <Text size={100}>Edison • v1.0.0</Text>
      </div>
    </div>
  );
};

export default App;