import React from 'react';
import { ModalProvider } from './context';
import { ModalContainer } from './ModalContainer';
import { ModalBody, IModalBody } from './ModalBody';
import { ModalHeader, IModalHeader } from './ModalHeader';
import { ModalFooter, IModalFooter } from './ModalFooter';
import { ModalTitle, IModalTitle } from './ModalTitle';
import { Portal } from '../Portal';

export interface IModal {
  className?: string;
  children: React.ReactNode;
  disableBackdropClick?: boolean;
  disableEscapeKeyDown?: boolean;
  onHide(): void;
  show: boolean;
  size?: 'sm' | 'lg' | 'xl';
  overlap?: boolean;
  [x: string]: any;
}

interface IModalSubComponents {
  Body: React.FC<IModalBody>;
  Header: React.FC<IModalHeader>;
  Footer: React.FC<IModalFooter>;
  Title: React.FC<IModalTitle>;
}

export const Modal: React.FC<IModal> & IModalSubComponents = (props) => {
  const { children, className, disableBackdropClick = false, disableEscapeKeyDown = false, onHide, size, show = false, overlap, ...otherProps } = props;

  return (
    <ModalProvider onHide={onHide} show={show} disableEscapeKeyDown={disableEscapeKeyDown}>
      <Portal>
        <ModalContainer className={className} size={size} overlap={overlap} disableBackdropClick={disableBackdropClick} {...otherProps}>
          {children}
        </ModalContainer>
      </Portal>
    </ModalProvider>
  );
};

Modal.Body = ModalBody;
Modal.Header = ModalHeader;
Modal.Footer = ModalFooter;
Modal.Title = ModalTitle;