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

// TODO: Refactor this to allow setting each border property separately

class Box extends Component {
  static propTypes = {
    borderTop: PropTypes.object,
    borderBottom: PropTypes.object,
    borderRight: PropTypes.object,
    borderLeft: PropTypes.object,
    border: PropTypes.object,
    radius: PropTypes.number,
    background: PropTypes.string,
    children: PropTypes.node,
  }

  render() {
    let {
      children, background,
      borderTop, borderBottom, borderLeft, borderRight,
      border, radius } = this.props
    const flatten = (border) => {
      if (!border) {
        return null
      }

      border.style = border.style || 'solid'
      border.width = border.width || 1
      border.color = border.color || 'black'

      return (border.width.toString() + 'px ' + border.style + ' ' + border.color)
    }

    if (border) {
      borderTop = borderBottom = borderLeft = borderRight = flatten(border)
    } else {
      borderTop = flatten(borderTop)
      borderBottom = flatten(borderBottom)
      borderLeft = flatten(borderLeft)
      borderRight = flatten(borderRight)
    }

    return (
      <div style={[
        { height: '100%', width: '100%', borderTop, borderBottom, borderLeft, borderRight },
        background && { backgroundColor: background },
        radius && { borderRadius: radius },
      ]}>
        {children}
      </div>
    )
  }
}

export default Radium(Box)