import React, { useEffect, useState } from "react";
import {
  ChartPieIcon,
  DocumentTextIcon,
  EnvelopeIcon,
  CommandLineIcon,
  Bars3Icon,
  SunIcon,
  MoonIcon,
} from "@heroicons/react/24/outline";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";

interface NavigationProps {
  children: React.ReactElement;
}

const Navigation: React.FC<NavigationProps> = ({
  children,
}: NavigationProps) => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
  const [user, setUser] = useState(null);
  const navigate = useNavigate();

  const [theme, setTheme] = useState(
    localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
  );

  const logout = () => {
    setIsDrawerOpen(!isDrawerOpen);
    const removeCookie = `quarkus-credential=; Max-Age=0;path=/`;
    document.cookie = removeCookie;
    localStorage.removeItem("root");
  };

  const handleToggle = (e) => {
    if (theme === "light") {
      setTheme("dark");
    } else {
      setTheme("light");
    }
  };

  useEffect(() => {
    axios.get("/api/users/me").then((res) => {
      if (res.data.username.trim() === "") {
        navigate("/login");
      }
      setUser(res.data);
    });
    localStorage.setItem("theme", theme);
    const localTheme = localStorage.getItem("theme");
    document.querySelector("html").setAttribute("data-theme", localTheme);
  }, [theme]);

  return (
    <>
      <div className="app h-screen">
        <div className="drawer">
          <input
            id="my-drawer"
            type="checkbox"
            className="drawer-toggle"
            checked={isDrawerOpen}
          />
          <div className="drawer-content h-full">
            {location.pathname !== "/login" && (
              <div className="p-6 flex justify-between">
                <div className="btn btn-ghost" onClick={toggleDrawer}>
                  <Bars3Icon className="size-6" />
                </div>
                <label className="swap swap-rotate">
                  <input type="checkbox" onChange={handleToggle} />

                  <SunIcon className="size-6 swap-off" />
                  <MoonIcon className="size-6 swap-on" />
                </label>
              </div>
            )}
            {children}
          </div>

          {location.pathname !== "/login" && (
            <div className="drawer-side">
              <div className="drawer-overlay" onClick={toggleDrawer}></div>
              <div className="h-full menu bg-base-200 text-base-content w-80">
                <li>
                  <div className="dropdown dropdown-right h-full">
                    <div
                      tabIndex={0}
                      role="button"
                      className="flex avatar items-center space-x-4 w-64"
                    >
                      <a>{localStorage.getItem("username")}</a>
                    </div>
                    <ul
                      tabIndex={0}
                      className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
                    >
                      {false && (
                        <>
                          <li>
                            <Link to="/profile" onClick={toggleDrawer}>
                              Profile
                            </Link>
                          </li>
                          <li>
                            <Link to="/settings" onClick={toggleDrawer}>
                              Settings
                            </Link>
                          </li>
                          <div className="divider" onClick={toggleDrawer}></div>
                        </>
                      )}
                      <li>
                        <Link to="login" onClick={logout}>
                          Log Out
                        </Link>
                      </li>
                    </ul>
                  </div>
                </li>
                {localStorage.getItem("root") && (
                  <li>
                    <details open={false}>
                      <summary>Admin</summary>
                      <ul>
                        <li>
                          <div>
                            <Link
                              to="/admin"
                              onClick={toggleDrawer}
                              className="w-60"
                            >
                              Admin
                            </Link>
                          </div>
                        </li>
                        <li>
                          <div>
                            <Link
                              to="/admin/tps"
                              onClick={toggleDrawer}
                              className="w-60"
                            >
                              Create Tp
                            </Link>
                          </div>
                        </li>
                        <li>
                          <div>
                            <Link
                              to="/admin/users"
                              onClick={toggleDrawer}
                              className="w-60"
                            >
                              Users
                            </Link>
                          </div>
                        </li>
                        <li>
                          <div>
                            <Link
                              to="/admin/jdmi"
                              onClick={toggleDrawer}
                              className="w-60"
                            >
                              Bulk user creation
                            </Link>
                          </div>
                        </li>
                      </ul>
                    </details>
                  </li>
                )}
                <li>
                  <div>
                    <ChartPieIcon className="size-6" />
                    <Link to="/" onClick={toggleDrawer}>
                      Dashboard
                    </Link>
                  </div>
                </li>
                <li>
                  <div>
                    <DocumentTextIcon className="size-6" />
                    <Link to="/tps" onClick={toggleDrawer}>
                      TPs
                    </Link>
                  </div>
                </li>
                <li>
                  <div>
                    <CommandLineIcon className="size-6" />
                    <Link to="/instances" onClick={toggleDrawer}>
                      Instances
                    </Link>
                  </div>
                </li>
                <li>
                  <div onClick={toggleDrawer}>
                    <EnvelopeIcon className="size-6" />
                    <Link to="/messages">Messages</Link>
                  </div>
                </li>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default Navigation;