import Logo from "./logo";
import { useState } from "react";
import { Link } from "react-router-dom";
import { MoonStars, Sun, List } from "react-bootstrap-icons";

function Navigation() {
  const [darkTheme, setDarkTheme] = useState<boolean>(
    localStorage.theme === "dark" ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
  );

  const [showMenu, setShowMenu] = useState(false);

  if (darkTheme) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }

  const storeTheme = (system: boolean) => {
    if (system) {
      localStorage.removeItem("theme");
    } else {
      localStorage.setItem("theme", darkTheme ? "dark" : "light");
    }
  };

  return (
    <div className="bg-white/75 dark:bg-slate-800/75 w-full backdrop-blur border-b-slate-200 dark:border-b-slate-900">
      <div className="max-w-8xl mx-auto">
        <div className="py-4 mx-4">
          <div className="flex items-center">
            <Link to="/">
              <Logo />
            </Link>
            <div className="ml-auto flex items-center">
              <nav className="hidden lg:flex">
                <ul className="flex space-x-8 font-bold">
                  <li>
                    <Link
                      className="hover:text-sky-500 dark:hover:text-sky-400"
                      to="/login"
                    >
                      Log in
                    </Link>
                  </li>
                </ul>
              </nav>
              <div className="flex border-l border-slate-200 ml-4 pl-4 lg:ml-6 lg:pl-6 lg:mr-2 dark:border-slate-500 space-x-2 lg:space-x-4">
                <div
                  onClick={() => {
                    storeTheme(false);
                    setDarkTheme(!darkTheme);
                  }}
                  title={
                    darkTheme ? "Switch to light mode" : "Switch to dark mode"
                  }
                  className="cursor-pointer"
                >
                  {darkTheme ? (
                    <Sun className="hover:text-sky-400" size={24} />
                  ) : (
                    <MoonStars size={24} className="hover:text-sky-500" />
                  )}
                </div>
                <div onClick={() => setShowMenu(!showMenu)} title="Show menu" className="cursor-pointer flex lg:hidden">
                    <List className="dark:hover:text-sky-400 hover:text-sky-500" size={24} />
                </div>
              </div>
            </div>
          </div>
        </div>
        <nav className={`lg:hidden my-2 p-4 border-slate-200 dark:border-slate-500 border-t border-b ${showMenu ? "flex" : "hidden"}`}>
          <ul className="flex space-x-8 font-bold">
            <li>
              <Link
                className="hover:text-sky-500 dark:hover:text-sky-400"
                to="/login"
              >
                Log in
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  );
}

export default Navigation;