"use client";

import { useSidebarContext } from "@/context/SidebarContext";
import { isBrowser } from "@/helpers/is-browser";
import { isSmallScreen } from "@/helpers/is-small-screen";
import { usePermission } from "@/utils/auth/permission";
import { Sidebar, Spinner } from "flowbite-react";
import Link from "next/link";
import { useEffect, useState } from "react";

import { BsBoxes } from "react-icons/bs";
import { FaMapMarkedAlt, FaSitemap, FaUsers } from "react-icons/fa";
import { HiChartPie } from "react-icons/hi";
import { HiOutlineCurrencyBangladeshi } from "react-icons/hi2";
import { IoSettingsOutline } from "react-icons/io5";
import { PiUsersFourDuotone } from "react-icons/pi";
import { RiFileUserLine } from "react-icons/ri";
import { TbLockCog } from "react-icons/tb";

import { twMerge } from "tailwind-merge";

export function DashboardSidebar() {
  let pageName = "";
  if (isBrowser()) {
    pageName = window.location.pathname;
  }
  const [newPage, setNewPage] = useState(pageName);
  const { isCollapsed, setCollapsed } = useSidebarContext();
  const [currentPage, setCurrentPage] = useState("");
  const [isRolePermission, setRolePermission] = useState(false);
  const [isPreview, setIsPreview] = useState(isCollapsed);

  const setActivePage = (newPage: string) => {
    setNewPage(newPage);
    setRolePermission(
      newPage.includes("roles") || newPage.includes("permissions")
    );
    setCurrentPage(newPage);
    if (!isCollapsed && isSmallScreen()) {
      setCollapsed(!isCollapsed);
    }
  };

  useEffect(() => {
    if (isCollapsed) setIsPreview(false);
  }, [isCollapsed]);

  const preview = {
    enable() {
      if (!isCollapsed) return;

      setIsPreview(true);
      setCollapsed(false);
    },
    disable() {
      if (!isPreview) return;

      setCollapsed(true);
    },
  };

  const has_role_permission = usePermission("roles.access");
  const has_permission = usePermission("permissions.access");
  const has_client_permission = usePermission("clients.access");
  const has_zone_permission = usePermission("zones.access");
  const has_sub_zone_permission = usePermission("sub-zones.access");
  const has_networks_permission = usePermission("networks.access");
  const has_mac_reseller_permission = usePermission("mac-resellers.access");
  const has_user_permission = usePermission("users.access");
  const has_billings_permission = usePermission("billings.access");
  const has_packages_permission = usePermission("packages.access");
  const has_company_settings = usePermission("company-settings.access");

  return (
    <>
      <Sidebar
        onMouseEnter={preview.enable}
        onMouseLeave={preview.disable}
        aria-label="Sidebar with multi-level dropdown example"
        collapsed={isCollapsed}
        className={twMerge(
          "fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700 lg:flex",
          isCollapsed && "hidden w-16 "
        )}
        id="sidebar"
      >
        {!has_client_permission && (
          <div className="text-center">
            <Spinner
              aria-label="Center-aligned spinner example"
              className="mt-20"
              size="sm"
            />
          </div>
        )}
        <div className="flex h-full flex-col justify-between">
          <div className="py-2">
            <Sidebar.Items>
              <Sidebar.ItemGroup className="mt-0 border-t-0 pb-1 pt-0">
                {has_mac_reseller_permission && (
                  <span onClick={() => setActivePage("/")}>
                    <Sidebar.Item
                      href="/"
                      as={Link}
                      icon={HiChartPie}
                      className={
                        "/" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      Dashboard
                    </Sidebar.Item>
                  </span>
                )}
                {has_client_permission && (
                  <span onClick={() => setActivePage("/clients")}>
                    <Sidebar.Item
                      href="/clients"
                      as={Link}
                      icon={FaUsers}
                      className={
                        "/clients" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      Client
                    </Sidebar.Item>
                  </span>
                )}
                {has_zone_permission && (
                  <span onClick={() => setActivePage("/zones")}>
                    <Sidebar.Item
                      href="/zones"
                      as={Link}
                      icon={FaMapMarkedAlt}
                      className={
                        "/zones" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      Zone
                    </Sidebar.Item>
                  </span>
                )}
                {/* {has_sub_zone_permission && (
                  <span onClick={() => setActivePage("/sub-zones")}>
                    <Sidebar.Item
                      href="/sub-zones"
                      as={Link}
                      icon={RiMindMap}
                      className={
                        "/sub-zones" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      Box
                    </Sidebar.Item>
                  </span>
                )} */}
                {has_networks_permission && (
                  <span onClick={() => setActivePage("/networks")}>
                    <Sidebar.Item
                      href="/networks"
                      as={Link}
                      icon={FaSitemap}
                      className={
                        "/networks" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      Network
                    </Sidebar.Item>
                  </span>
                )}
                {has_billings_permission && (
                  <span onClick={() => setActivePage("/billings")}>
                    <Sidebar.Item
                      href="/billings"
                      as={Link}
                      icon={HiOutlineCurrencyBangladeshi}
                      className={
                        "/billings" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      Billings
                    </Sidebar.Item>
                  </span>
                )}
                {has_packages_permission && (
                  <span onClick={() => setActivePage("/packages")}>
                    <Sidebar.Item
                      href="/packages"
                      as={Link}
                      icon={BsBoxes}
                      className={
                        "/packages" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      Packages
                    </Sidebar.Item>
                  </span>
                )}
                {has_mac_reseller_permission && (
                  <span onClick={() => setActivePage("/mac-resellers")}>
                    <Sidebar.Item
                      href="/mac-resellers"
                      as={Link}
                      icon={PiUsersFourDuotone}
                      className={
                        "/mac-resellers" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700 mb-1"
                          : "mb-1"
                      }
                    >
                      MAC Reseller
                    </Sidebar.Item>
                  </span>
                )}
                {(has_role_permission || has_permission) && (
                  <Sidebar.Collapse
                    icon={TbLockCog}
                    label="Role-Permissions"
                    open={isRolePermission}
                  >
                    {has_role_permission && (
                      <span onClick={() => setActivePage("/roles")}>
                        <Sidebar.Item
                          href="/roles"
                          as={Link}
                          className={
                            "/roles" === currentPage
                              ? "bg-gray-100 dark:bg-gray-700 mb-1"
                              : "mb-1"
                          }
                        >
                          Roles
                        </Sidebar.Item>
                      </span>
                    )}
                    {has_permission && (
                      <span onClick={() => setActivePage("/permissions")}>
                        <Sidebar.Item
                          href="/permissions"
                          as={Link}
                          className={
                            "/permissions" === currentPage
                              ? "bg-gray-100 dark:bg-gray-700 mb-1"
                              : "mb-1"
                          }
                        >
                          Permissions
                        </Sidebar.Item>
                      </span>
                    )}
                  </Sidebar.Collapse>
                )}
                {has_user_permission && (
                  <span onClick={() => setActivePage("/users")}>
                    <Sidebar.Item
                      href="/users"
                      icon={RiFileUserLine}
                      as={Link}
                      className={
                        "/users" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700"
                          : ""
                      }
                    >
                      Users list
                    </Sidebar.Item>
                  </span>
                )}
                {has_company_settings && (
                  <span onClick={() => setActivePage("/settings")}>
                    <Sidebar.Item
                      href="/settings"
                      icon={IoSettingsOutline}
                      as={Link}
                      className={
                        "/settings" === currentPage
                          ? "bg-gray-100 dark:bg-gray-700"
                          : ""
                      }
                    >
                      Settings
                    </Sidebar.Item>
                  </span>
                )}
              </Sidebar.ItemGroup>
            </Sidebar.Items>
          </div>
        </div>
      </Sidebar>
      {!isCollapsed ? (
        <div
          className="bg-transparent h-screen w-full fixed top-0 z-10 lg:hidden"
          onClick={() => setCollapsed(true)}
        ></div>
      ) : (
        ""
      )}
    </>
  );
}