import { useSidebar } from '@/lib/context/SidebarContext';
import { SidebarData } from '@/utils/data';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { GoSidebarExpand } from 'react-icons/go';
import { Menu, Sidebar } from 'react-pro-sidebar';
import Modal1 from '../Modal/Modal1';
import style from './index.module.scss';
import { signOut } from 'next-auth/react';

const UserSideBar = ({
  show,
  onClose,
}: {
  show: boolean;
  onClose?: () => void;
}) => {
  const router = useRouter();

  const [currentActiveRole, setCurrentActiveRole] = useState<string>('user');
  const { isOpen, closeSidebar, openSidebar, toggleSidebar } = useSidebar();

  const [openLogoutModal, setOpenLogoutModal] = useState<boolean>(false);

  const handleResize = () => {
    if (window.innerWidth < 767) {
      closeSidebar();
    }
  };

  useEffect(() => {
    if (window.innerWidth < 767) {
      closeSidebar();
    }
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  useEffect(() => {
    if (router.pathname.includes('user')) {
      setCurrentActiveRole('user');
      return;
    }
    setCurrentActiveRole('carrier');
  }, [router]);

  return (
    <>
      <Sidebar
        width="300px"
        collapsedWidth="0px"
        style={{ position: 'relative' }}
        collapsed={!show}
      >
        <div className="sidebar-close-icon" onClick={closeSidebar}>
          <GoSidebarExpand />
        </div>
        <div
          onClick={() => router.push('/user')}
          className="logo text-center cursor-pointer"
        >
          <img src="/images/logo.svg" alt="" />
        </div>

        <Menu>
          {SidebarData?.filter((item) => item?.role === currentActiveRole).map(
            (item, index) => {
              return (
                <>
                  <Link
                    data-tooltip-id={`my-tooltip-${index + 1}`}
                    href={item?.path}
                    key={index}
                    className={`d-flex menuBox text-capitalize ${style.sidebarMenu}  ${!show && 'sidebar-collapsed'} ${item?.active.includes(router.pathname) && 'active'} my-3  gap-3 justify-content-start align-items-center`}
                  >
                    {item?.icon}
                    {show && (
                      <span className="mb-0 text-white">{item?.title}</span>
                    )}
                  </Link>
                </>
              );
            }
          )}
        </Menu>
        <div className="logout">
          <Link
            href={'javascript:void(0)'}
            onClick={() => setOpenLogoutModal(true)}
            className="d-flex align-items-center gap-2"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H15.25C15.66 11.25 16 11.59 16 12C16 12.41 15.66 12.75 15.25 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z"
                fill="white"
              />
              <path
                d="M4.56 11.2501L6.63 9.18009C6.78 9.03009 6.85 8.84009 6.85 8.65009C6.85 8.46009 6.78 8.26009 6.63 8.12009C6.34 7.83009 5.86 7.83009 5.57 8.12009L2.22 11.4701C1.93 11.7601 1.93 12.2401 2.22 12.5301L5.57 15.8801C5.86 16.1701 6.34 16.1701 6.63 15.8801C6.92 15.5901 6.92 15.1101 6.63 14.8201L4.56 12.7501H9V11.2501H4.56Z"
                fill="white"
              />
            </svg>
            {show && <span className="text-white mb-0">Logout</span>}
          </Link>
        </div>
      </Sidebar>

      <Modal1
        title="Logout"
        description="Are you sure you want to logout?"
        show={openLogoutModal}
        handleNoClick={() => setOpenLogoutModal(false)}
        handleYesClick={async () => {
          await signOut();
          localStorage.clear();
          sessionStorage.clear();
        }}
      />
    </>
  );
};

export default UserSideBar;