"use client";
import React 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";

const Sidebar = () => {
  const router = useRouter();
  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();
  console.log(pathname);
  return (
    <div className={styles.mainContainer}>
      <div className={styles.topContainer}>
        {/* Logo Container */}
        <div className={styles.logoContainer}>
          <div>
            <div className={styles.logoIconContainer}>
              <LogoIcon />
            </div>
            <div className={styles.logoDescription}>
              <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>Home</p>
          </div>
          <div
            className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
            onClick={navToOrganization}
          >
            <OrganizationIcon />
            <p>Organization</p>
          </div>
          <div
            onClick={navToProject}
            className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
          >
            <ProjectIcon />
            <p>Project</p>
          </div>
          <div
            onClick={navToUsers}
            className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
          >
            <UserIcon />
            <p>Users</p>
          </div>
          <div
            onClick={navToRoles}
            className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
          >
            <RolesIcon />
            <p>Roles</p>
          </div>
          <div
            onClick={navToCredentials}
            className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
          >
            <CredentialsIcon />
            <p>Credentials</p>
          </div>
          <div
            onClick={navToAgents}
            className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
          >
            <AgentIcon />
            <p>Agents</p>
          </div>
        </div>
      </div>
      {/* Footers */}
      <div className={styles.navFooterContainer}>
        <div>
          <div>
            <p>Download ICTL v3</p>
            <DownloadIcon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;