import React from 'react'
import moment from 'moment'

class Swisstennis extends React.Component {
  constructor() {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.initDownload = this.initDownload.bind(this)
  }

  handleChange (event) {
    event.preventDefault()
  }

  initDownload (event) {
    event.preventDefault()
    const { loginRequest } = this.props.swisstennisActions
    loginRequest({ sequence: true })
  }

  indicate (status) {
    if (status === 'uninitialized') {
      return (<span>{'\u2610'}</span>)
    } else if (status === 'request') {
      return (<span style={{color: 'grey'}}>{'\u2610'}</span>)
    } else if (status === 'success') {
      return (<span style={{color: 'green'}}>{'\u2611'}</span>)
    } else if (status === 'failure') {
      return (<span style={{color: 'red'}}>{'\u2612'}</span>)
    }
  }

  statusValue (status) {
    if (status === 'uninitialized' || status === 'failure') return 0
    if (status === 'request') return 1
    if (status === 'success') return 2
  }

  render () {
    const state = this.props.swisstennis
    const actions = this.props.swisstennisActions
    const progress = this.statusValue(state.loginStatus) + this.statusValue(state.playerListDownloadStatus) +
      this.statusValue(state.playerListParseStatus) + this.statusValue(state.calendarDownloadStatus) +
      this.statusValue(state.calendarParseStatus)
    
    return (
      <div>
        <h2>Download</h2>
        <button onClick={this.initDownload}>Importieren</button><br />
        <progress value={progress} max={10}>{progress / 10}%</progress>
        <table>
          <tbody>
          <tr>
            <td>Login</td><td>{this.indicate(state.loginStatus)}</td>
          </tr>
          <tr>
            <td>PlayerList herunterladen</td><td>{this.indicate(state.playerListDownloadStatus)}</td>
          </tr>
          <tr>
            <td>PlayerList einlesen</td><td>{this.indicate(state.playerListParseStatus)}</td>
          </tr>
          <tr>
            <td>Calendar herunterladen</td><td>{this.indicate(state.calendarDownloadStatus)}</td>
          </tr>
          <tr>
            <td>Calendar einlesen</td><td>{this.indicate(state.calendarParseStatus)}</td>
          </tr>
          </tbody>
        </table>

        <h2>Dateien</h2>
        <table className='table table-bordered table-striped'>
          <thead>
            <tr>
              <th>Name</th><th>Grösse</th><th>Datum</th><th>Verwendet</th><th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {state.files.map((file, key) => (
            <tr key={key}>
              <td>{file.filename}</td>
              <td>{file.size/1024}kB</td>
              <td>{moment(file.mtime).format('DD.MM.YYYY HH:mm')}</td>
              <td>{(state.calendars.find(matchList => matchList.file === file.filename) || state.playerLists.find(playerList => playerList.file === file.filename)) ? 'Ja' : 'Nein'}</td>
              <td>
                <a href="#" onClick={(event) => {
                  event.preventDefault()
                  if (file.filename.includes('Calendar')) actions.parseCalendarRequest({filename: file.filename})
                  if (file.filename.includes('PlayerList')) actions.parsePlayerListRequest({filename: file.filename})
                }}>parsen</a> <a>loeschen</a>
              </td>
            </tr>))}
          </tbody>
        </table>

        <h2>Calendar Files</h2>
        <table className='table table-bordered table-striped'>
          <thead>
            <tr>
              <th>Datei</th><th>Datum</th><th>Aktiv</th><th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {state.calendars && state.calendars.sort((a, b) => a.imported < b.imported).map((calendar, key) => (
            <tr key={key}>
              <td>{calendar.file}</td>
              <td>{moment(calendar.imported).format('DD.MM.YYYY HH:mm')}</td>
              <td>{state.calendar && (state.calendar._id === calendar._id) ? 'Ja' : 'Nein'}</td>
              <td><a href="#" onClick={(event) => {
                event.preventDefault()
                actions.getCalendarRequest({calendarId: calendar._id})
              }}>verwenden</a> <a href="#" onClick={(event) => {
                event.preventDefault()
                actions.deleteCalendarRequest({calendarId: calendar._id})
              }}>loeschen</a></td>
            </tr>
            ))}
          </tbody>
        </table>

        <h2>PlayerList Files</h2>
        <table className='table table-bordered table-striped'>
          <thead>
            <tr>
              <th>Datei</th><th>Datum</th><th>Aktiv</th><th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {state.playerLists && state.playerLists.sort((a, b) => a.imported < b.imported).map((playerList, key) => (
            <tr key={key}>
              <td>{playerList.file}</td>
              <td>{moment(playerList.imported).format('DD.MM.YYYY HH:mm')}</td>
              <td>{state.playerList && (state.playerList._id === playerList._id) ? 'Ja' : 'Nein'}</td>
              <td><a href="#" onClick={(event) => {
                event.preventDefault()
                actions.getPlayerListRequest({playerListId: playerList._id})
              }}>verwenden</a> <a href="#" onClick={(event) => {
                event.preventDefault()
                actions.deletePlayerListRequest({playerlistId: playerList._id})
              }}>loeschen</a></td>
            </tr>
            ))}
          </tbody>
        </table>
      </div>
    )
  }
}

export default Swisstennis
