import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import { HotKeys } from 'react-hotkeys'
import styled from 'styled-components'
import v from '../../config/variables'

const ModalOverlay = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  z-index: 500;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: ${props => props.showBackdrop && props.backdropBackground};
  opacity: ${props => props.visible ? 1 : 0};
  pointer-events: ${props => props.visible ? 'all' : 'none'};

  &:hover {
    outline: 0;
  }
`
ModalOverlay.displayName = 'ModalOverlay'

const ModalContent = styled.div`
  position: relative;
  background: ${v.theme.white};
  border-radius: ${v.base.radiusSmall}px;
  padding: ${v.base.gutter}px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  width: ${props => () => {
    if (props.size === 'large') return '800px'
    if (props.size === 'small') return '300px'
    return '450px'
  }}
`
ModalContent.displayName = 'ModalContent'

class Modal extends React.Component {
  static propTypes = {
    size: PropTypes.oneOf([
      'small',
      'medium',
      'large'
    ]),
    children: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.string
    ]),
    visible: PropTypes.bool,
    closeKeys: PropTypes.arrayOf(PropTypes.string),
    onRequestToClose: PropTypes.func,
    cancellable: PropTypes.bool,
    showBackdrop: PropTypes.bool,
    backdropBackground: PropTypes.string
  }

  static defaultProps = {
    size: 'medium',
    children: null,
    visible: false,
    closeKeys: ['esc'],
    onRequestToClose: null,
    cancellable: true,
    showBackdrop: true,
    backdropBackground: 'rgba(0, 0, 0, 0.5)'
  }

  get keysActions() {
    return {
      requestToClose: this.props.closeKeys
    }
  }

  get keysHandlers() {
    return {
      requestToClose: () => this._handleRequestToClose()
    }
  }

  _handleRequestToClose = () => {
    const { cancellable, onRequestToClose } = this.props
    cancellable && onRequestToClose && onRequestToClose()
  }

  _handleContentPress = e => e.stopPropagation()

  render () {
    const autofocus = el => el && el.parentNode.focus()

    return ReactDOM.createPortal(
      <ModalOverlay
        innerRef={autofocus}
        onClick={this._handleRequestToClose}
        {...this.props}
      >
        <HotKeys keyMap={this.keysActions} handlers={this.keysHandlers}>
          <ModalContent {...this.props} onClick={this._handleContentPress}>
            {this.props.children}
          </ModalContent>
        </HotKeys>
      </ModalOverlay>,
      document.body
    )
  }
}

export default Modal
