import React from 'react'
import SkyLightStateless from 'react-skylight'
import { Button } from '../Button'
import { Heading } from '../Heading'

import './Modal.css'

export const Modal = (props) => {
  const onBackgroundClick = (event) => {
    if (event.target.className === 'ModalBackground') {
      props.handleClose()
    }
  }

  return (
    <If condition={props.isOpen}>
      <div className="Modal" data-testid="Modal" data-z-index={props.zIndex}>
        <div className="ModalBackground" onClick={onBackgroundClick}>
          <div className="ModalMain">
            {props.children()}
          </div>
        </div>
      </div>
    </If>
  );
}

Modal.defaultProps = {
  zIndex: 50,
  isOpen: false,

  handleClose: () => {
    console.error('Modal used without handleClose prop.')
  }
}

Modal.Footer = (props) => {
  return (
    <div className="ModalFooter">
      {props.children}
    </div>
  )
}

Modal.Title = (props) => {
  return (
    <div className="ModalTitle">
      <Heading size={3}>
        {props.children}
      </Heading>
    </div>
  )
}

Modal.Body = (props) => {
  return (
    <div className="ModalBody">
      {props.children}
    </div>
  )
}