import ReactModal from 'react-modal';
import {ChildrenFC} from '@utils';
import css from './index.module.css';
import {CloseCircleFilled} from '@ant-design/icons';
import {useEffect} from 'react';

const styles: ReactModal.Styles = {
  content: {
    width: '90vw',
    height: '90vh',
    position: 'relative',
    overflow: 'hidden',
  },
};

type Props = {
  visible: boolean;
  onClose: () => void;
  testId?: string;
};

const PageModal: ChildrenFC<Props> = function ({
  children,
  visible,
  onClose,
  testId,
}) {
  useEffect(
    function () {
      if (visible) {
        document.body.classList.add('lock-scroll');
      } else {
        document.body.classList.remove('lock-scroll');
      }
    },
    [visible],
  );

  return (
    <ReactModal
      data-testid={testId}
      shouldCloseOnOverlayClick
      onRequestClose={onClose}
      isOpen={visible}
      ariaHideApp={false}
      style={styles}
      closeTimeoutMS={200}
    >
      <section className={css.pageDialog}>
        <div className={css.pageDialogClose}>
          <CloseCircleFilled
            className={css.pageDialogCloseIcon}
            onClick={onClose}
          />
        </div>
        <div className={css.pageDialogContent}>{children}</div>
      </section>
    </ReactModal>
  );
};

export default PageModal;
