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

import './SubItem.less'

export default observer class SubItem extends Component
  @propTypes:
    subItem: PropTypes.object.isRequired,
    onClickSubItem: PropTypes.func

  @defaultProps:
    onClickSubItem: =>

  onClickSubItem: () =>
    store.isMobileMenuOpen = false

    @props.onClickSubItem(@props.subItem)

  render: =>
    regExp = new RegExp @props.subItem.url

    isMatched = regExp.test FlowRouter.current().path

    <div className="sub-item #{isMatched && 'matched'}" onClick={@onClickSubItem}>
      <div>
        <h5>-</h5>
      </div>
      <div>
        <h5>{ @props.subItem.title }</h5>
      </div>
      <div>
        { @props.subItem.badge &&
          <Label circular size="mini" color="teal">{ @props.subItem.badge }</Label>
          }
      </div>
      <div />
    </div>