"use client";

import React, { useState } from "react";
import styles from "./styles.module.css";
import NavLeft from "./navleft/Header";
import NavRight from "./navright/Profile";
import HamburgerIcon from "../../components/icons/hamburger";
import useIsMobile from "@/app/hooks/useIsMobile";
import LogoIcon from "../icons/logo";
import HomeIcon from "../icons/home";
import OrganizationIcon from "../icons/organization";
import ProjectIcon from "../icons/project";
import UserIcon from "../icons/user";
import RolesIcon from "../icons/roles";
import CredentialsIcon from "../icons/credentials";
import AgentIcon from "../icons/agent";
import DownloadIcon from "../icons/download";
import useNavigations from "@/app/hooks/useNagivation";
import { usePathname } from "next/navigation";

const Navbar = () => {
  const [triggerDropDown, setTriggerDropDown] = useState(false);
  const {
    navToAgents,
    navToCredentials,
    navToProject,
    navToRoles,
    navToHome,
    navToOrganization,
    navToUsers,
  } = useNavigations(setTriggerDropDown);

  const pathname = usePathname();

  const isMobile = useIsMobile();
  return (
    <div
      className={`${styles.mainContainer} ${pathname.includes("/add") ? styles.onAdd : ""}`}
    >
      {/* Mobile Hamburger Button */}
      <div className={styles.mobileHamburger}>
        <div className={styles.hamburgerMenu}>
          <HamburgerIcon
            onClick={() => setTriggerDropDown(!triggerDropDown)}
            className={triggerDropDown ? styles.active : ""}
          />
          {triggerDropDown && (
            <div className={styles.dropDownMenu}>
              <div className={styles.headings}>
                <div>
                  <div className={styles.logoContainer}>
                    <LogoIcon />
                  </div>
                  <div className={styles.info}>
                    <p>Internal Developer Platform</p>
                    <p>By Project Moonshot Inc.</p>
                  </div>
                </div>
              </div>
              <div className={styles.navs}>
                <div className={styles.nav} onClick={navToHome}>
                  <HomeIcon />
                  <p>Home</p>
                </div>
                <div className={styles.nav} onClick={navToOrganization}>
                  <OrganizationIcon />
                  <p>Organization</p>
                </div>
                <div className={styles.nav} onClick={navToProject}>
                  <ProjectIcon />
                  <p>Project</p>
                </div>
                <div className={styles.nav} onClick={navToUsers}>
                  <UserIcon />
                  <p>Users</p>
                </div>
                <div className={styles.nav} onClick={navToRoles}>
                  <RolesIcon />
                  <p>Roles</p>
                </div>
                <div className={styles.nav} onClick={navToCredentials}>
                  <CredentialsIcon />
                  <p>Credentials</p>
                </div>
                <div className={styles.nav} onClick={navToAgents}>
                  <AgentIcon />
                  <p>Agents</p>
                </div>
              </div>
              <div className={styles.footer}>
                <div>
                  <div>
                    <p>Download ICTL v3</p>
                    <DownloadIcon />
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        <NavLeft />
      </div>
      {/* Mobile Menu Button */}
      <NavRight />
    </div>
  );
};

export default Navbar;