import { Icon, Label } from 'semantic-ui-react'
import SubItemEx from './SubItemEx.coffee'

import './Item.less'

export default observer class Item extends Component
  constructor: (props) ->
    super props

    @state = observable
      isOpen: false

  @propTypes:
    item: PropTypes.object.isRequired
    onClickItem: PropTypes.func

  @defaultProps:
    onClickItem: =>

  onClickItem: =>
    if @props.item.subItems
      @state.isOpen = !@state.isOpen
    else
      store.isMobileMenuOpen = false

    @props.onClickItem(@props.item)

  renderSubItems: =>
    @props.item.subItems?.map (subItem, index) =>
      <SubItemEx key={index} subItem={subItem} />

  render: =>
    if @props.item.url
      regExp = new RegExp @props.item.url

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

    <div>
      <div className="menu-item #{isMatched && 'matched'} #{@state.isOpen && 'open'}" onClick={@onClickItem}>
        <div>
          <Icon style={{ color: '#737986', marginTop: -4 }} name={@props.item.iconName} />
        </div>
        <div>
          <h4>{ @props.item.title }</h4>
        </div>
        <div>
          { @props.item.badge &&
            <Label circular size="mini" color="blue">{ @props.item.badge }</Label>
            }
        </div>
        <div>
          { @props.item.subItems &&
            <Icon size="small" style={{ color: '#737986' }} name="chevron down" />
            }
        </div>
      </div>
      <div className="sub-menu" style={{ height: if @state.isOpen then 30 * @props.item.subItems.length else 0 }}>
        { @renderSubItems() }
      </div>
    </div>