import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Radium from 'radium'
import { Dimmer } from 'ui'
import { colorInfo, sizeInfo } from 'ui/style'

@Radium
export class Modal extends Component {
  static propTypes = {
    children: PropTypes.node,
    open: PropTypes.bool,
    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
  }

  static defaultProps = {
    width: '60%',
  }

  static style = {
    zIndex: 101,
    background: colorInfo.modalBackground,
    borderRadius: 4,
    boxShadow: `0 0 ${sizeInfo.modalShadowWidth} ${colorInfo.modalShadow}`
  }

  render() {
    const { open, children, width } = this.props

    return (
      <Dimmer active={open}>
        <div style={[Modal.style, { width }]}>
          {children}
        </div>
      </Dimmer>
    )
  }
}