import React from 'react';
import classNames from 'classnames';
// eslint-disable-next-line import/no-extraneous-dependencies
import Portal from 'react-portal';

import '../base';
import styles from './Modal.styl';

export default function Modal({
  style,
  width = 400,
  children,
  isOpen,
  openByClickOn,
  closeOnEsc = true,
  closeOnOutsideClick = true,
  onClose
}) {

  return (
    <Portal
      isOpen={isOpen}
      openByClickOn={openByClickOn}
      closeOnEsc={closeOnEsc}
      closeOnOutsideClick={closeOnOutsideClick}
      onClose={onClose}
    >
      <ModalContents
        width={width}
        style={style}
        closeOnOutsideClick={closeOnOutsideClick}
      >
        {children}
      </ModalContents>
    </Portal>
  );
}

// The component below must be a class, or react-portal throws an error upon closing:
// https://github.com/tajo/react-portal/issues/81
/* eslint-disable react/prefer-stateless-function */
class ModalContents extends React.Component {
  render() {
    const { width, style, closePortal, closeOnOutsideClick, children } = this.props;
    const wrapperClasses = classNames({
      [styles.wrapper]: true
    });

    const modalClasses = classNames({
      [styles.modal]: true
    });

    const overlayClasses = classNames({
      [styles.overlay]: true
    });

    const mStyle = { ...{ width }, ...style };

    return (
      <div className={wrapperClasses}>
        <div className={overlayClasses} onClick={closeOnOutsideClick && closePortal} />
        <div className={modalClasses} style={mStyle}>
          {React.cloneElement(children, { closePortal })}
        </div>
      </div>
    );
  }
}