import Links from "./Links";
import HeadMd from "./HeadMd";
import HeadSm from "./HeadSm";
import { Button } from "@mui/material";
import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
import ModalLogout from "@/app/component/ModalLogout";
import { useState } from "react";

function Sidebar({ active, setActive, open, setOpen }) {
  const [modal, setModal] = useState(false);
  const handleOpen = () => setModal(true);
  const handleClose = () => setModal(false);

  return (
    <div
      className={`
        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] hover-sidebar
        ${active ? " right-0" : "right-[-85%]"}
        ${open ? "min-w-[243px] md:w-[243px]" : "min-w-[92px] md:w-[92px]"}
    `}
    >
      <aside
        className={`
        relative h-screen overflow-hidden 
        transition-all duration-500 w-[85%]
        ${active ? " right-0" : "right-[-85%]"}
        ${open ? "w-[243px]" : "w-[92px] hover:w-[243px]"}
      `}
      >
        <div
          className={`
           z-30 md:top-0 md:right-0 w-[85%]
        ${active ? " right-0" : "right-[-85%]"}
          overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
          border-0 border-l border-l-[#EFEFEF] bg-[#FFF] dark:bg-[#222433]
          transition-all duration-500 dark:border-transparent
          ${open ? "md:w-[243px]" : "md:w-[92px] hover:md:w-[243px]"}
        `}
        >
          <div className="w-full">
            <HeadMd open={open} setOpen={setOpen} />
            <HeadSm setActive={setActive} />
            <Links open={open} setActive={setActive} />
          </div>
          <div
            className={`w-full flex logout-btn justify-center overflow-hidden transition-all duration-500 ${
              open ? "!max-w-full" : "!max-w-[36px]"
            }`}
          >
            <Button
              variant="text"
              onClick={handleOpen}
              className="!flex !w-fit !items-center !justify-start !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
            >
              <LogoutOrangeP />
              خروج از حساب
            </Button>
            <ModalLogout open={modal} handleClose={handleClose} />
          </div>
        </div>
      </aside>
    </div>
  );
}

export default Sidebar;