import React, { Component } from 'react'
import Radium from 'radium'
import PropTypes from 'prop-types'
import { reactAutoBind } from 'auto-bind2'

export class Dimmer extends Component {
  static propTypes = {
    active: PropTypes.bool.isRequired,
    children: PropTypes.node,
  }

  static style = {
    div: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
      width: '100vw',
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 100,
      background: 'rgba(25, 25, 30, 0.75)'
    }
  }

  constructor(props) {
    super(props)
    reactAutoBind(this)
  }

  preventPropagation(e) {
    e.stopPropagation()
  }

  render() {
    return this.props.active ? (
      <div style={Dimmer.style.div} onClick={this.preventPropagation}>
        {this.props.children}
      </div>
    ) : null
  }
}

export default Radium(Dimmer)