"use client"
import Image from "next/image";
import { icons } from "#/assets/icons"
import NavItem from "./navItem";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { useState } from "react";


export default function Sidebar() {

  const pathname = usePathname();

  const [mobileVisible, setmobileVisible] = useState(false)

  const  handleMobileVisible = ()=> {
    setmobileVisible(!mobileVisible)
  }

  return (
    <>
      <div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder position-relative `}>
        <div className="sidebar r-m-0 d-flex flex-column ">
          <div className="logo r-flex-center px-[19px] ">
            <Image src={icons.logo} alt="Logo" className="scale-95" />
          </div>
          <div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
            <NavItem link="/admin/home" iconSrc={icons.homeIcon} label="Home" isNavHome={true} isActive={(pathname === "/admin/") || (pathname === "/admin/home")} />
            <NavItem link="/admin/organizations" iconSrc={icons.companiesIcon} label="Organizations" isActive={pathname.startsWith("/admin/organizations")} classname="disabled" />
            <NavItem link="/admin/admins" iconSrc={icons.userGroup} label="Admins" isActive={pathname.startsWith("/admin/admins")} classname="disabled" />
          </div>
          <div className="logout position-absolute bottom-[40px] left-[28px]">
            <Link href="/login" className="cursor-pointer">
              <Image src={icons.logout} alt="Logout" />
            </Link>
          </div>
        </div>
      </div>
      <div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
        {/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */}
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list hamburger-icon" viewBox="0 0 16 16">
          <path fillRule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
        </svg>
      </div>
    </>
  )
}