/* eslint-disable @next/next/no-img-element */
import { SidebarData } from '@/utils/data';
import { faXmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import clsx from 'clsx';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Offcanvas from 'react-bootstrap/Offcanvas';
import { Modal } from 'rsuite';
import Button from '../ui/Button';
import style from './index.module.scss';

interface SidebarProps {
  show: Boolean;
  handleClose: () => void;
}

export default function SideBar({ show, handleClose }: SidebarProps) {
  const router = useRouter();
  const [logoutConfirmationModal, setLogoutConfirmation] = useState(false);

  const { pathname } = router;

  const [currentActiveRole, setCurrentActiveRole] = useState<string>('user');

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

  const handleCancelClick = () => {
    handleClose();
  };

  return (
    <>
      <Offcanvas
        show={show}
        onHide={handleClose}
        backdrop={false}
        scroll={true}
        responsive={'xl'}
        className="main_sidebar"
      >
        <Offcanvas.Header closeButton>
          <FontAwesomeIcon
            icon={faXmark}
            onClick={handleCancelClick}
            className={clsx(style.cancelIcon)}
          />
        </Offcanvas.Header>
        <Offcanvas.Body className="pt-5">
          <div
            onClick={() => router.push('/')}
            className="logo text-center cursor-pointer"
          >
            <img src="/images/logo.svg" alt="" />
          </div>
          <div className="menu pt-5 ps-3">
            <ul className="list">
              {SidebarData?.filter((item) =>
                item?.role?.includes(currentActiveRole)
              )?.map((item, index) => {
                return (
                  <li
                    className={`${item?.active.includes(pathname) && 'active'}`}
                    key={index}
                  >
                    <Link href={item?.path} className="text-black">
                      {item?.icon}
                      <span className="fs-6">{item?.title}</span>
                    </Link>
                  </li>
                );
              })}

              <li className="logout">
                <Link
                  href={'#!'}
                  className=""
                  onClick={() => setLogoutConfirmation(true)}
                >
                  <i className="icon-Icon-metro-exit1"></i> Logout
                </Link>
              </li>
            </ul>
          </div>
        </Offcanvas.Body>
      </Offcanvas>

      <Modal
        open={logoutConfirmationModal}
        onClose={() => setLogoutConfirmation(false)}
      >
        <Modal.Body>
          <h3 className="text-center fw-bold">Logout</h3>
          <h4 className="text-light-grey-2   my-4  fs-6 text-center">
            Are you sure you want to logout?
          </h4>
          <div className="d-flex   my-4  justify-content-center align-items-center gap-2">
            <Button className="btn btn-outline-dark rounded-pill" size="md">
              No
            </Button>
            <Button
              onClick={() => setLogoutConfirmation(false)}
              className="btn btn-feature rounded-pill"
              size="md"
            >
              Yes
            </Button>
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
}