import { useRouter } from 'next/router';

import Modal from './Modal';
import queryclient from '@/QueryClient';
import basicstore from '@/stores/auth';

interface LogoutModalProps {
  showModal: boolean;
  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
}

const LogoutModal: React.FC<LogoutModalProps> = ({ showModal, setShowModal }) => {
  const { setUserData } = basicstore();
  const router = useRouter();
  const renderheader = () => (
    <button
      type="button"
      className="btn-close"
      data-bs-dismiss="modal"
      aria-label="Close"
      onClick={() => setShowModal(false)}
    >
      <img src="img/modal-close.svg" alt="Close" />
    </button>
  );

  const renderBody = () => (
    <div className="logout-modal-body">
      <div className="img-block">
        <img src="img/logout.svg" alt="Logout" />
      </div>
      <h2>Are you sure you want to logout?</h2>
      <div className="btn-cover justify-content-center">
        <button
          className="btn btn-prmary"
          type="button"
          onClick={() => {
            setUserData({
              isLoggedIn: false,
              userData: null,
              userType: null,
              darkmode: true,
            });
            localStorage.clear();
            sessionStorage.clear();
            setShowModal(false);
            queryclient.clear();
            router.push('/login');
          }}
        >
          Confirm
        </button>
      </div>
    </div>
  );

  return (
    <Modal
      className="modal fade custom-modal logout-modal"
      dialgName="modal-dialog modal-xl modal-dialog-centered"
      show={showModal}
      closeModal={() => setShowModal(false)}
      body={renderBody()}
      header={renderheader()}
    />
  );
};

export default LogoutModal;