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

class Row extends Component {
  static propTypes = {
    children: PropTypes.node,
    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
  }

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

    return (
      <div style={{ height: '100%', display: 'flex', width, minWidth, flexDirection: 'row' }}>{children}</div>
    )
  }
}

Row.Item = Radium(class RowLayoutItem extends Component {
  static propTypes = {
    children: PropTypes.node,
    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
    grow: PropTypes.bool,
  }

  render() {
    const { children, grow, width, minWidth } = this.props
    const flexGrow = grow ? 1 : null

    return (
      <div style={{ width, minWidth, flexGrow }}>{children}</div>
    )
  }
})

export default Radium(Row)