import css from './index.module.css';
import {FC, FormEventHandler, ReactNode} from 'react';
import ReacatModal from 'react-modal';
import {CloseOutlined} from '@ant-design/icons';
import ModalBtnGroup from './BtnGroup';
import {Space} from 'antd';

type Props = {
  visible: boolean,
  style?: ReacatModal.Styles,
  title: string,
  onClose?: () => void,
  isLoading?: boolean,
  onSubmit?: FormEventHandler<HTMLFormElement>
  children?: ReactNode,
  hideBtnGroup?: boolean,
  testId?: string,
};

const Modal: FC<Props> = function({
  visible,
  style,
  title,
  onClose,
  isLoading,
  onSubmit,
  children,
  hideBtnGroup,
  testId,
}) {
  return (
    <ReacatModal
      isOpen={visible}
      style={style}
      closeTimeoutMS={200}
      ariaHideApp={false}
    >
      <section className={css.dialog} data-testid={testId}>
        <div className={css.dialogTitle}>
          <h3>{title}</h3>
          <CloseOutlined className={css.dialogClose} onClick={onClose} />
        </div>

        <div className={css.dialogContent}>
          <form onSubmit={onSubmit}>
            <Space direction='vertical'>
              {children}
              {!hideBtnGroup && <ModalBtnGroup isLoading={isLoading} onClose={onClose} />}
            </Space>
          </form>
        </div>
      </section>
    </ReacatModal>
  );
};

export default Modal;
