import React from 'react';
import PropTypes from 'prop-types';
import ReactModal from 'react-modal';
import classNames from 'classnames';

import Header from './Header';
import Body from './Body';
import Footer from './Footer';
import Fake from './Fake';

import './modal.scss';

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
  /** Modal content inline style */
  contentStyle: PropTypes.object,
  /** Modal overlay inline style */
  overlayStyle: PropTypes.object,
  contentLabel: PropTypes.string
};

const defaultProps = {
  className: undefined,
  size: 'sm',
  contentStyle: {},
  overlayStyle: {},
  contentLabel: ''
};

const Modal = ({ className, overlayStyle, contentStyle, size, ...rest }) => (
  <ReactModal
    className={className}
    styleName={classNames('content', size)}
    overlayClassName="flive_modal_overlay"
    style={{
      overlay: { ...overlayStyle },
      content: { ...contentStyle }
    }}
    {...rest}
  />
);


Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;

Modal.Header = Header;
Modal.Body = Body;
Modal.Footer = Footer;
Modal.Fake = Fake;

export default Modal;
