import App from '../app'
import {Zones} from '../cards'

import Chat from './chat'
import Cols from './cols'
import Grid from './grid'
import DeckSettings from './deck-settings'
import GameSettings from './game-settings'
import {LBox} from './checkbox'
let d = React.DOM

export default React.createClass({
  componentWillMount() {
    App.state.players = []
    App.send('join', this.props.id)
  },
  componentDidMount() {
    this.timer = window.setInterval(decrement, 1e3)
  },
  componentWillUnmount() {
    window.clearInterval(this.timer)
  },
  componentWillReceiveProps({id}) {
    if (this.props.id === id)
      return

    App.send('join', id)
  },
  render() {
    return d.div({ className: 'container' },
      d.audio({ id: 'beep', src: '/media/beep.wav' }),
      d.div({ className: 'game' },
        d.div({ className: 'game-controls' },
          d.div({ className: 'game-status' }, this.Players(), this.Start()),
          DeckSettings(),
          GameSettings()),
        this.Cards()),
      Chat())
  },

  Cards() {
    if (Object.keys(Zones.pack).length)
      let pack = Grid({ zones: ['pack'] })
    let component = App.state.cols ? Cols : Grid
    let pool = component({ zones: ['main', 'side', 'junk'] })
    return [pack, pool]
  },
  Start() {
    if (App.state.didGameStart || !App.state.isHost)
      return

    let startControls = d.div({},
      d.div({}, `Format: ${App.state.format}`),
      LBox('addBots', 'bots'),
      d.div({},
        d.label({},
          d.input({
            type: 'checkbox',
            checkedLink: App.link('useTimer'),
          }), ' use '),
        d.label({},
          d.input({
            className: 'number',
            disabled: !App.state.useTimer,
            min: 0,
            max: 60,
            step: 5,
            type: 'number',
            valueLink: App.link('timerLength'),
          }), '-second timer')),
      d.div({},
        d.button({ onClick: App._emit('start') }, 'Start game')))

    return d.fieldset({ className: 'start-controls fieldset' },
      d.legend({ className: 'legend game-legend' }, 'Start game'),
      d.span({}, startControls))
  },
  Players() {
    let rows = App.state.players.map(row)
    let columns = [
      d.th({}, '#'),
      d.th({}, ''), // connection status
      d.th({}, 'name'),
      d.th({}, 'packs'),
      d.th({}, 'time'),
      d.th({}, 'cock'),
      d.th({}, 'mws'),
    ]

    if (App.state.isHost)
      columns.push(d.th({})) // kick

    let playersTable = d.table({ id: 'players' },
      d.thead({},
        d.tr({}, ...columns)),
      d.tbody({},
        rows))

    return d.fieldset({ className: 'fieldset' },
      d.legend({ className: 'legend game-legend' }, 'Players'),
      playersTable)
  }
})

function row(p, i) {
  let {players, self} = App.state
  let {length} = players

  if (length % 2 === 0)
    let opp = (self + length/2) % length

  let className
    = i === self ? 'self'
    : i === opp  ? 'opp'
    : null

  let connectionStatusIndicator
    = p.isBot ? d.span({
        className: 'icon-bot',
        title: 'This player is a bot.',
      })
    : p.isConnected ? d.span({
        className: 'icon-connected',
        title: 'This player is currently connected to the server.',
      })
    : d.span({
        className: 'icon-disconnected',
        title: 'This player is currently disconnected from the server.',
      })

  let columns = [
    d.td({}, i + 1),
    d.td({}, connectionStatusIndicator),
    d.td({}, p.name),
    d.td({}, p.packs),
    d.td({}, p.time),
    d.td({}, p.hash && p.hash.cock),
    d.td({}, p.hash && p.hash.mws),
  ]

  if (App.state.isHost)
    if (i !== self && !p.isBot)
      columns.push(d.td({}, d.button({
        onClick: ()=> App.send('kick', i),
      }, 'kick')))
    else
      columns.push(d.td({}))

  return d.tr({ className }, ...columns)
}

function decrement() {
  for (let p of App.state.players)
    if (p.time)
      p.time--
  App.update()
}
