import { Responsive } from 'semantic-ui-react'

export default observer class _Responsive extends Component
  @propTypes:
    children: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.array
    ]).isRequired
    only: PropTypes.string

  @defaultProps:
    only: ''

  render: =>
    minWidth = null

    maxWidth = null

    flags = [0, 0, 0]

    if /mobile/.test @props.only
      flags[0] = 1

    if /tablet/.test @props.only
      flags[1] = 1

    if /computer/.test @props.only
      flags[2] = 1

    count = flags.reduce (sum, flag) =>
      if flag is 1
        sum + 1

      else if flag is 0
        sum
    , 0

    if count is 1
      if flags[0] is 1
        maxWidth = Responsive.onlyMobile.maxWidth

      else if flags[1] is 1
        minWidth = Responsive.onlyTablet.minWidth

        maxWidth = Responsive.onlyTablet.maxWidth

      else if flags[2] is 1
        minWidth = Responsive.onlyComputer.minWidth

    else if count is 2
      if flags[0] is 1 and flags[1] is 1
        maxWidth = Responsive.onlyTablet.maxWidth

      else if flags[1] is 1 and flags[2] is 1
        minWidth = Responsive.onlyTablet.minWidth

    <Responsive {...@props} minWidth={minWidth} maxWidth={maxWidth}>
      { @props.children }
    </Responsive>