/**
 * Box
 *
 * Usage:
 *  <Box
 *    margin='small|medium|large|none'
 *    margin={{
 *      hz: 'small|medium|large|none',
 *      vt: 'small|medium|large|none'
 *    }}
 *    padding='small|medium|large|none'
 *    padding={{
 *      hz: 'small|medium|large|none',
 *      vt: 'small|medium|large|none'
 *    }}
 *  >
 *
 * @type {React.StatelessComponent}
 */
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { space, width, fontSize, color } from 'styled-system'

const StyledBox = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`

const sizeToScaleMap = {
  none: 0,
  small: 1,
  medium: 2,
  large: 3
}

const Box = props => {
  const extraProps = {}

  if (props.margin) {
    if (typeof props.margin === 'string') {
      extraProps.m = sizeToScaleMap[props.margin]
    } else {
      if (props.margin.hz) {
        extraProps.mx = sizeToScaleMap[props.margin.hz]
      }

      if (props.margin.vt) {
        extraProps.my = sizeToScaleMap[props.margin.vt]
      }
    }
  }

  if (props.padding) {
    if (typeof props.padding === 'string') {
      extraProps.p = sizeToScaleMap[props.padding]
    } else {
      if (props.padding.hz) {
        extraProps.px = sizeToScaleMap[props.padding.hz]
      }

      if (props.padding.vt) {
        extraProps.py = sizeToScaleMap[props.padding.vt]
      }
    }
  }

  return (
    <StyledBox
      {...props}
      {...extraProps}
    >
      { props.children }
    </StyledBox>
  )
}

const sizeTypes = PropTypes.oneOf([
  'small',
  'medium',
  'large',
  'none'
])

Box.propTypes = {
  children: PropTypes.node.isRequired,
  margin: PropTypes.oneOfType([
    sizeTypes,
    PropTypes.shape({
      hz: sizeTypes,
      vt: sizeTypes
    })
  ]),
  padding: PropTypes.oneOfType([
    sizeTypes,
    PropTypes.shape({
      hz: sizeTypes,
      vt: sizeTypes
    })
  ])
}

export default Box