import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

import CloseIcon from 'react-icons/lib/md/cancel'

import Container from './container'

class Modal extends React.Component {
  static propTypes = {
    overlay: PropTypes.bool,
    fluid: PropTypes.bool,
    children: PropTypes.node.isRequired,
    onClose: PropTypes.func.isRequired
  }

  static defaultProps = {
    overlay: true,
    fluid: false
  }

  componentWillMount() {
    this.node = document.createElement('div')
    document.body.appendChild(this.node)
  }

  componentWillUnmount() {
    document.body.removeChild(this.node)
    this.node = null
  }

  render() {
    const { children, overlay, fluid, onClose } = this.props

    if (!process.browser) {
      return null
    }

    return ReactDOM.createPortal(
      <div className={`modal ${overlay ? 'overlay' : ''}`}>
        <Container fluid={fluid}>
          <div className='content'>
            <nav>
              <span onClick={onClose}>
                <CloseIcon />
              </span>
            </nav>
            {children}
          </div>
        </Container>

        <style jsx global>{`
          body {
            overflow: hidden;
          }
        `}</style>

        <style jsx>{`
          @import 'colors';

          .modal {
            position: fixed;
            z-index: 2000;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            display: flex;
            flex-direction: column;
          }

          .overlay {
            background-color: rgba(0, 0, 0, 0.7);
          }

          span {
            color: darken($lightgrey, 10%);
            font-size: 40px;

            &:hover {
              color: darken($lightgrey, 20%);
              cursor: pointer;
            }

            @media (max-width: 551px) {
              font-size: 24px;
            }
          }

          nav {
            text-align: right;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid $lightgrey;
          }

          .content {
            background: $white;
            border-radius: 2px;
            flex: 1;
            margin: 20px 0;
            padding: 20px;
            padding: 1.5em 1.7em;
            padding-top: 12px;
            display: flex;
            flex-direction: column;

            @media (max-width: 551px) {
              padding: 1em;
            }
          }
        `}</style>
      </div>,
      this.node
    )
  }
}

export default Modal

@@ -557,16 +557,80 @@
 s.node)%0A
+    document.addEventListener('keydown', this.onKeyDown, false)%0A
   %7D%0A%0A  c
@@ -702,24 +702,213 @@
     
-this.node = null
+document.removeEventListener('keydown', this.onKeyDown, false)%0A    this.node = null%0A  %7D%0A%0A  onKeyDown = e =%3E %7B%0A    const %7B onClose %7D = this.props%0A%0A    if (e.keyCode === 27 /* ESC */) %7B%0A      onClose()%0A    %7D
 %0A  %7D

Allow pressing ESC to close preview modal