import React, { FC, ReactNode } from 'react';
import ReactModal from 'react-modal';

import css from './index.module.css';
import Loading from '../Loading';
import classNames from 'classnames';

export interface ModalProps {
  isOpen?: boolean;
  isLoading?: boolean;
  error?: string;
  children?: ReactNode;
  actions?: ReactNode;
  handleOnSubmit: (e) => void;
  title?: string;
  isBookingLoader?: boolean;
}

const Modal: FC<ModalProps> = ({
  isOpen,
  isLoading,
  children,
  actions,
  handleOnSubmit,
  error,
  title,
  isBookingLoader = false,
  ...rest
}) => (
  <ReactModal
    {...rest}
    isOpen={isOpen}
    className={classNames([
      css.modal__overlay,
      isBookingLoader ? css.modal__overlayBooking : '',
    ])}
    overlayClassName={css.modal}
    ariaHideApp={false}
  >
    {isLoading && (
      <div className={css.modal__loading}>
        <Loading />
      </div>
    )}
    <div className={isLoading ? css.modal__contentHidden : ''}>
      <div className={css.modal__title}>{title}</div>

      <form onSubmit={handleOnSubmit} className={css.modal__form}>
        <div className={css.modal__content}>
          {error && <div className={css.modal__error}>{error}</div>}
          {children}
        </div>
        <div className={css.modal__actions}>{actions}</div>
      </form>
    </div>
  </ReactModal>
);

export default Modal;