import React, { useState, useEffect } from "react";
import { ipc } from "./gen/ipc";

function App() {
  const [themeMode, setThemeMode] = useState(
    () => localStorage.getItem("app-theme") || "system"
  );

  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");

    let isDark = false;
    if (themeMode === "system") {
      isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    } else {
      isDark = themeMode === "dark";
    }

    if (isDark) {
      root.classList.add("dark");
    } else {
      root.classList.add("light");
    }
  }, [themeMode]);

  useEffect(() => {
    if (themeMode === "system") {
      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
      const handleChange = () => {
        const root = window.document.documentElement;
        root.classList.remove("light", "dark");
        if (mediaQuery.matches) {
          root.classList.add("dark");
        } else {
          root.classList.add("light");
        }
      };
      mediaQuery.addEventListener("change", handleChange);
      return () => mediaQuery.removeEventListener("change", handleChange);
    }
  }, [themeMode]);

  function setAppTheme(newTheme) {
    localStorage.setItem("app-theme", newTheme);
    ipc.app.SetTheme({ theme: newTheme }).then(() => setThemeMode(newTheme));
  }

  function animationStyle(delayMs) {
    return { animationDelay: `${delayMs}ms` };
  }

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

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

  return (
    <div className="container">
      <div className="theme-toggle show-animation" style={animationStyle(400)}>
        <div className={`theme-toggle-bg ${themeMode}`}></div>
        <button
          className={themeMode === "light" ? "active" : ""}
          onClick={() => setAppTheme("light")}
          aria-label="Light theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
        </button>
        <button
          className={themeMode === "system" ? "active" : ""}
          onClick={() => setAppTheme("system")}
          aria-label="System theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
        </button>
        <button
          className={themeMode === "dark" ? "active" : ""}
          onClick={() => setAppTheme("dark")}
          aria-label="Dark theme"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
        </button>
      </div>

      <div className="row show-animation" style={animationStyle(0)}>
        <img src="/logo.svg" className="logo" alt="MōBrowser logo" />
      </div>
      <h1 className="show-animation" style={animationStyle(80)}>Welcome to MōBrowser!</h1>
      <p className="show-animation" style={animationStyle(160)}>Please enter your name and click the button.</p>
      <div className="row show-animation" style={animationStyle(240)}>
        <div>
          <input id="greet-input" placeholder="Your name" onKeyDown={handleKeyPress} />
          <button id="greet-btn" type="button" onClick={sayHello}>Greet
          </button>
        </div>
      </div>
      <p id="greet-msg" className="show-animation" style={animationStyle(320)}></p>
      {window.navigator.userAgent.indexOf("Mac") !== -1 && (<div className="draggable"></div>)}
    </div>
  )
}

export default App;