import React, { useEffect, useState, useCallback } from "react";
import { Button, Col, ConfigProvider, Flex, Input, Row, Segmented, Space, theme, Typography } from "antd";
import { SunOutlined, MoonOutlined, DesktopOutlined } from "@ant-design/icons";
import { ipc } from "./gen/ipc";

const { Text, Title } = Typography;

const App = () => {
  const [themeMode, setThemeMode] = useState(() => {
    return localStorage.getItem("theme") || "system";
  });
  const [systemDark, setSystemDark] = useState(
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );

  useEffect(() => {
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    const handler = (e) => setSystemDark(e.matches);
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, []);

  const isDark = themeMode === "dark" || (themeMode === "system" && systemDark);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", isDark);
    document.documentElement.classList.toggle("light", !isDark);
  }, [isDark]);

  const setAppTheme = useCallback((val) => {
    ipc.app.SetTheme({ theme: val }).then(() => {
      localStorage.setItem("theme", val);
      setThemeMode(val);
    });
  }, []);

  const animationStyle = (delayMs) => ({ animationDelay: `${delayMs}ms` });

  const sayHello = () => {
    const name = document.querySelector("#greet-input").value;
    ipc.greet.SayHello({ name: name }).then((message) =>
      document.querySelector("#greet-msg").textContent = message.value
    );
  };

  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      document.querySelector("#greet-btn").click();
    }
  };

  return (
    <ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
      }}
    >
      <Flex vertical={true} align="center" style={{ marginTop: 128 }}>
        <Row className="show-animation" style={animationStyle(0)}>
          <Col span={24}><img src="/logo.svg" alt="MōBrowser logo" style={{ height: "128px" }} /></Col>
        </Row>
        <Title className="show-animation" style={{ margin: 27, fontSize: "3rem", ...animationStyle(80) }}>Welcome to MōBrowser!</Title>
        <Text className="show-animation" style={{ margin: 16, ...animationStyle(160) }}>Please enter your name and click the button.</Text>
        <Row className="show-animation" style={animationStyle(240)}>
          <Space>
            <Input id="greet-input" placeholder="Your name"
              style={{ height: "38px" }}
              onKeyDown={handleKeyPress} />
            <Button id="greet-btn" onClick={sayHello}
              style={{ height: "38px" }}
              type="default"
            >Greet</Button>
          </Space>
        </Row>
        <Typography id="greet-msg" className="show-animation" style={{ margin: 16, ...animationStyle(320) }}></Typography>
        <div style={{ position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", zIndex: 100 }}>
          <div className="show-animation" style={animationStyle(400)}>
            <Segmented
              className="theme-segmented"
              value={themeMode}
              onChange={(val) => setAppTheme(val)}
              options={[
                { value: "light", icon: <SunOutlined /> },
                { value: "system", icon: <DesktopOutlined /> },
                { value: "dark", icon: <MoonOutlined /> },
              ]}
            />
          </div>
        </div>
        {window.navigator.userAgent.indexOf("Mac") !== -1 && (<div className="draggable"></div>)}
      </Flex>
    </ConfigProvider>
  );
}

export default App;
