import {
  MdMenu,
  MdOutlineBadge,
  MdOutlinePerson,
  MdOutlineStorage,
} from "react-icons/md";
import { ReactNode, useEffect, useState } from "react";
import StorageView from "./manage_storage_page.tsx";
import UserView from "./manage_user_page.tsx";
import { useTranslation } from "react-i18next";
import { ManageMePage } from "./manage_me_page.tsx";
import ManageServerConfigPage from "./manage_server_config_page.tsx";

export default function ManagePage() {
  const { t } = useTranslation();
  const [page, setPage] = useState(0);

  const [lg, setLg] = useState(window.innerWidth >= 1024);

  useEffect(() => {
    const handleResize = () => {
      setLg(window.innerWidth >= 1024);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  useEffect(() => {
    document.title = t("Manage");
  }, []);

  const buildItem = (title: string, icon: ReactNode, p: number) => {
    return (
      <li
        key={title}
        onClick={() => {
          setPage(p);
          const checkbox = document.getElementById(
            "my-drawer-2",
          ) as HTMLInputElement;
          if (checkbox) {
            checkbox.checked = false;
          }
        }}
        className={"my-1"}
      >
        <a
          className={`flex items-center h-9 px-4 ${page == p && "bg-primary text-primary-content"}`}
        >
          {icon}
          <span className={"text"}>{title}</span>
        </a>
      </li>
    );
  };

  const pageNames = [t("My Info"), t("Storage"), t("Users"), t("Server")];

  const pageComponents = [
    <ManageMePage />,
    <StorageView />,
    <UserView />,
    <ManageServerConfigPage />,
  ];

  return (
    <div className="drawer lg:drawer-open">
      <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
      <div
        className="drawer-content"
        style={{
          height: "calc(100vh - 64px)",
        }}
      >
        <div className={"flex w-full h-14 items-center gap-2 px-3"}>
          <label
            className={"btn btn-square btn-ghost lg:hidden"}
            htmlFor="my-drawer-2"
          >
            <MdMenu size={24} />
          </label>
          <h1 className={"text-xl font-bold"}>{pageNames[page]}</h1>
        </div>
        <div>{pageComponents[page]}</div>
      </div>
      <div
        className="drawer-side"
        style={{
          height: lg ? "calc(100vh - 64px)" : "100vh",
        }}
      >
        <label
          htmlFor="my-drawer-2"
          aria-label="close sidebar"
          className="drawer-overlay"
        ></label>
        <ul className="menu bg-base-100 min-h-full lg:min-h-0 w-72 px-4 lg:mt-1">
          <h2 className={"text-lg font-bold p-4"}>{t("Manage")}</h2>
          {buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"} />, 0)}
          {buildItem(
            t("Storage"),
            <MdOutlineStorage className={"text-xl"} />,
            1,
          )}
          {buildItem(t("Users"), <MdOutlinePerson className={"text-xl"} />, 2)}
          {buildItem(
            t("Server"),
            <MdOutlineStorage className={"text-xl"} />,
            3,
          )}
        </ul>
      </div>
    </div>
  );
}