class FittingRoom extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      shouldShowActionsMenu: false
    }
    this.toggleActionsMenu = this.toggleActionsMenu.bind(this)
  }

  toggleActionsMenu () {
    this.setState({shouldShowActionsMenu: !this.state.shouldShowActionsMenu})
  }

  isOccupied (fittingRoom) {
    return !_.isEmpty(fittingRoom.fittingRoomTicket)
  }

  isOpen (fittingRoom) {
    return fittingRoom.open === true
  }

  renderOccupiedFittingRoom (fittingRoom) {
    let walkIn = fittingRoom.fittingRoomTicket.walkIn

    return (
      <div className='FittingRoom__Container'>
        <div className='FittingRoom__Label'>
          {fittingRoom.label}
        </div>
        <div className='FittingRoom__Status'>
          {walkIn.firstName} {walkIn.lastName}
        </div>
        <div className='FittingRoom__Timer'>
          {formatTimeElapsed(fittingRoom.fittingRoomTicket.startTime)}
        </div>
        {this.state.shouldShowActionsMenu && <FittingRoomActionsMenu
          toggleActionsMenu={this.toggleActionsMenu}
          adjustFittingRoom={() => { this.props.removeWalkIn(walkIn, fittingRoom.fittingRoomTicket) }}
          adjustFittingRoomText={'Mark as Done'} />
        }
      </div>
    )
  }

  renderFittingRoom (fittingRoom) {
    return (
      <div className='FittingRoom__Container'>
        <div className='FittingRoom__Label'>
          {fittingRoom.label}
        </div>
        <div className='FittingRoom__Status'>
          {fittingRoom.open ? 'Open' : 'Closed'}
        </div>
        {this.state.shouldShowActionsMenu && <FittingRoomActionsMenu
          toggleActionsMenu={this.toggleActionsMenu}
          adjustFittingRoom={() => this.props.updateFittingRoom(fittingRoom)}
          adjustFittingRoomText={fittingRoom.open ? 'Close Fitting Room' : 'Open Fitting Room'} />}
      </div>
    )
  }

  render () {
    let {fittingRoom} = this.props
    let status
    let fittingRoomComponent

    if (this.isOccupied(fittingRoom)) {
      status = 'Occupied'
      fittingRoomComponent = this.renderOccupiedFittingRoom(fittingRoom)
    } else if (this.isOpen(fittingRoom)) {
      status = 'Open'
        fittingRoomComponent = this.renderFittingRoom(fittingRoom)
    } else {
      status = 'Closed'
      fittingRoomComponent = this.renderFittingRoom(fittingRoom)
    }

    return (
      <div className={`FittingRoom FittingRoom--${status}`} onClick={this.toggleActionsMenu}>
        {fittingRoomComponent}
      </div>
    )
  }
}

class FittingRoomActionsMenu extends React.Component {
  constructor (props) {
    super(props)

    this.setWrapperRef = this.setWrapperRef.bind(this)
    this.handleClickOutside = this.handleClickOutside.bind(this)
  }

  componentDidMount () {
    document.addEventListener('mousedown', this.handleClickOutside)
  }

  componentWillUnMount () {
    document.removeEventListener('mousedown', this.handleClickOutside)
  }

  setWrapperRef (node) {
    this.wrapperRef = node
  }

  handleClickOutside (event) {
    // THIS ALLOWS THE TOGGLE TO REMAIN FUNCTIONAL WHEN THE MENU IS OPEN
    let toggles = Array.prototype.slice.call(document.querySelectorAll('.FittingRoom'))
    if (this.wrapperRef && !this.wrapperRef.contains(event.target) && !toggles.some((t) => t.contains(event.target))) {
      this.props.toggleActionsMenu()
    }
  }

  render () {
    return (
      <div ref={this.setWrapperRef}>
        <div className='FittingRoomActionsMenu'>
          <div className='FittingRoomActionsMenu__Arrow'>
            <div className='FittingRoomActionsMenu__InnerArrow' />
          </div>
          <ul className='FittingRoomActionsMenu__Body'>
            <li className='FittingRoomActionsMenu__Body__Item' onClick={this.props.adjustFittingRoom}>
              {this.props.adjustFittingRoomText}
            </li>
          </ul>
        </div>
      </div>
    )
  }
}

let fittingRoom = {
  label: "1",
  open: true,
  fittingRoomTicket: null
}

ReactDOM.render(<FittingRoom fittingRoom={fittingRoom}/>,
document.getElementById('app'))