"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";

import { usePathname, useRouter } from "next/navigation";
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 LogoIcon from "../icons/logo";
import ArrowDownIcon from "../icons/arrowDown";

const Sidebar = () => {
  const router = useRouter();
  const [isCollapsed, setIsCollapsed] = useState(false);
  const navToHome = () => {
    router.push("/home");
  };
  const navToOrganization = () => {
    router.push("/organization");
  };
  const navToProject = () => {
    router.push("/projects");
  };
  const navToUsers = () => {
    router.push("/users");
  };
  const navToRoles = () => {
    router.push("/roles");
  };
  const navToCredentials = () => {
    router.push("/credentials");
  };
  const navToAgents = () => {
    router.push("/agents");
  };

  const pathname = usePathname();
  return (
    <div
      className={`${styles.mainContainer} ${isCollapsed ? styles.collapsed : ""}`}
    >
      <div className={styles.topContainer}>
        {/* Logo Container */}
        <div className={styles.logoContainer}>
          <div
            className={styles.toggleContainer}
            onClick={() => setIsCollapsed(!isCollapsed)}
          >
            <ArrowDownIcon
              className={`${styles.arrowIcon} ${isCollapsed ? styles.notToggle : styles.toggle}`}
            />
          </div>
          <div>
            <div className={styles.logoIconContainer}>
              <LogoIcon />
            </div>
            <div
              className={`${styles.logoDescription} ${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              <p>Internal Developer Platform</p>
              <p>By Project Moonshot Inc.</p>
            </div>
          </div>
        </div>
        {/* Navigations */}
        <div className={styles.navContainer}>
          <div
            className={`${styles.nav} ${pathname.includes("/home") ? styles.active : ""}`}
            onClick={navToHome}
          >
            <HomeIcon />
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Home
            </p>
          </div>
          <div
            className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
            onClick={navToOrganization}
          >
            <OrganizationIcon />
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Organization
            </p>
          </div>
          <div
            onClick={navToProject}
            className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
          >
            <ProjectIcon />
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Project
            </p>
          </div>
          <div
            onClick={navToUsers}
            className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
          >
            <UserIcon />
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Users
            </p>
          </div>
          <div
            onClick={navToRoles}
            className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
          >
            <RolesIcon />
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Roles
            </p>
          </div>
          <div
            onClick={navToCredentials}
            className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
          >
            <CredentialsIcon />
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Credentials
            </p>
          </div>
          <div
            onClick={navToAgents}
            className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
          >
            <AgentIcon />
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Agents
            </p>
          </div>
        </div>
      </div>
      {/* Footers */}
      <div className={styles.navFooterContainer}>
        <div>
          <div>
            <p
              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
            >
              Download ICTL v3
            </p>
            <DownloadIcon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;
