import { Dispatch, SetStateAction } from "react";

// hooks
import useTheme from "hooks/use-theme";
// components
import {
  WorkspaceHelpSection,
  WorkspaceSidebarDropdown,
  WorkspaceSidebarMenu,
} from "components/workspace";
import { ProjectSidebarList } from "components/project";

export interface SidebarProps {
  toggleSidebar: boolean;
  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
}

const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) => {
  // theme
  const { collapsed: sidebarCollapse } = useTheme();

  return (
    <nav className="relative z-20 h-screen">
      <div
        className={`${sidebarCollapse ? "" : "w-auto md:w-60"} fixed inset-y-0 top-0 ${
          toggleSidebar ? "left-0" : "-left-60 md:left-0"
        } flex h-full flex-col bg-white duration-300 md:relative`}
      >
        <div className="flex h-full flex-1 flex-col border-r border-gray-200">
          <div className="flex h-full flex-1 flex-col pt-2">
            <div className="px-2">
              <WorkspaceSidebarDropdown />
            </div>
            <WorkspaceSidebarMenu />
            <ProjectSidebarList />
            <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Sidebar;