import React, {PropTypes as t} from 'react'
import {Table} from 'react-bootstrap'
import Icon from 'react-fa'

import {APPS, APPS_BY_RELEASE} from './metadata'

let SelectApps = React.createClass({
  propTypes: {
    disabled: t.bool,
    isV4: t.bool,
    versions: t.object,
    onChange: t.func.isRequired,
    value: t.array.isRequired,
  },

  handleToggleAll(e) {
    this.props.onChange(
      e.target.checked
        ? Object.keys(this.props.versions)
        : []
    )
  },

  handleToggleApp(e) {
    let appIds = this.props.value.slice()
    if (e.target.checked) {
      appIds.push(e.target.value)
    }
    else {
      appIds.splice(appIds.indexOf(e.target.value), 1)
    }
    this.props.onChange(appIds)
  },

  render() {
    let {disabled, release, value, isV4, versions } = this.props

    let appIds = Object.keys(APPS).filter(id => id in versions)

    return <Table bordered striped condensed>
      <colgroup>
        <col width="1%"/>
        <col width="49%"/>
        <col width="49%"/>
        <col width="1%"/>
      </colgroup>
      <thead>
        <tr>
          <th>
            <input
              checked={value.length === appIds.length}
              disabled={disabled}
              onChange={this.handleToggleAll}
              type="checkbox"
            />
          </th>
          <th>Application</th>
          <th>Version</th>
          <th>Info</th>
        </tr>
      </thead>
      <tbody>
        {appIds.map(appId => {
          let checked = value.indexOf(appId) !== -1
          let controlId = `application-${appId}`
          let version = versions[appId]
          let {name, url, v4Sandbox} = APPS[appId]
          return <tr key={appId}>
            <td>
              <input
                checked={checked}
                disabled={disabled}
                id={controlId}
                onChange={this.handleToggleApp}
                type="checkbox"
                value={appId}
              />
            </td>
            <td>
              <label style={{fontWeight: 'normal'}} htmlFor={controlId}>
                {`${name}${isV4 && v4Sandbox ? ' (Sandbox)' : ''}`}
              </label>
            </td>
            <td>{version}</td>
            <td style={{whiteSpace: 'nowrap'}}>
              <a href={url} target="_blank" title={`Find out more about ${name}`}>
                <Icon name="info-circle"/> <Icon name="external-link"/>
              </a>
            </td>
          </tr>
        })}
      </tbody>
    </Table>
  }
})

export default SelectApps