import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modalSelector } from '@/redux/modal/modal.selector';
import { closeModal } from '@/redux/modal/modal.slice';
import { Icon } from '@/shared/Icon';
import dynamic from 'next/dynamic';
import { twMerge } from 'tailwind-merge';
import { LoginModal } from './LoginModal';
import { MODAL_ROLE } from './Modal.constants';
import { OverviewImagesModal } from './OverviewImagesModal';
import { EditOverlayModal } from './EditOverlayModal';

const MolArtModal = dynamic(
  () => import('./MolArtModal/MolArtModal.component').then(mod => mod.MolArtModal),
  { ssr: false },
);

export const Modal = (): React.ReactNode => {
  const dispatch = useAppDispatch();
  const { isOpen, modalName, modalTitle } = useAppSelector(modalSelector);

  const handleCloseModal = (): void => {
    dispatch(closeModal());
  };

  return (
    <div
      className={twMerge(
        'absolute left-0 top-0 z-10 h-full w-full bg-cetacean-blue/[.48]',
        isOpen ? '' : 'hidden',
      )}
      role={MODAL_ROLE}
    >
      <div className="flex h-full w-full items-center justify-center">
        <div
          className={twMerge(
            'flex h-5/6 w-10/12	flex-col	overflow-hidden rounded-lg',
            modalName === 'login' && 'h-auto w-[400px]',
            modalName === 'edit-overlay' && 'h-auto w-[450px]',
          )}
        >
          <div className="flex items-center justify-between bg-white p-[24px] text-xl">
            <div>{modalTitle}</div>
            <button type="button" onClick={handleCloseModal} aria-label="close button">
              <Icon name="close" className="fill-font-500" />
            </button>
          </div>
          {isOpen && modalName === 'overview-images' && <OverviewImagesModal />}
          {isOpen && modalName === 'mol-art' && <MolArtModal />}
          {isOpen && modalName === 'login' && <LoginModal />}
          {isOpen && modalName === 'edit-overlay' && <EditOverlayModal />}
        </div>
      </div>
    </div>
  );
};