import React from 'react'
import moment from 'moment'
import { SZTM_API } from '../../local-constants'

class SZTM extends React.Component {
  constructor() {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.setDate = this.setDate.bind(this)
  }

  handleChange (event) {
    event.preventDefault()
  }

  setDate (date, event) {
    event.preventDefault()
    this.props.sztmActions.setFilter({ date })
  }

  generateLists (places, date, matchListId, event) {
    event.preventDefault()
    this.props.sztmActions.resetProgress()
    places.forEach(place => {
      if (place) this.props.sztmActions.generateListRequest({place, date: moment.unix(date).format('YYYYMMDDTHHmmss'), matchListId})
    })
  }

  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>)
    }
  }

  render () {
    const state = this.props.sztm
    const actions = this.props.sztmActions
    const calendar = this.props.swisstennis.calendar
    const { filteredFiles, filter, progress } = state
    const dates = []
    const places = []
    calendar && calendar.matches.forEach(match => {
      const date = moment(match.date).startOf('day').unix()
      if (!dates.includes(date)) dates.push(date)
    })
    calendar && calendar.matches.filter(match => filter.date ? moment(match.date).startOf('day').unix() === filter.date : true).forEach(match => {
      if (!places.includes(match.place)) places.push(match.place)
    })
    
    return (
      <div>
        <h2>Filter</h2>
        {dates.map((date, key) => <a href="#" key={key} onClick={(event) => this.setDate(date, event)} style={filter.date === date ? {fontWeight: 'bold'} : {}}>{moment.unix(date).format('DD.MM.')}</a>)}
        <p>Calendar: {calendar && <span>{calendar.file} ({moment(calendar.imported).format('DD.MM. HH:mm')})</span>}</p>
        <p>
          <button onClick={(event) => this.generateLists(places, filter.date, calendar._id, event)} disabled={!filter.date}>Listen generieren</button>
          <progress value={progress.length} max={places.length}>{progress.length / places.length * 100}%</progress>
        </p>
        <p><button onClick={(event) => {
          event.preventDefault()
          actions.generateZipRequest({date: moment.unix(filter.date).format('YYYYMMDDTHHmmss')})
        }} disabled={!filter.date}>ZIP generieren</button></p>
        <h2>Dateien</h2>
        <table className='table table-bordered table-striped'>
          <thead>
            <tr>
              <th>Name</th><th>Grösse</th><th>Datum</th><th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {filteredFiles.map((file, key) => (
            <tr key={key}>
              <td><a href={`${SZTM_API}/download/${file.filename}`}>{file.filename}</a></td>
              <td>{file.size/1024}kB</td>
              <td>{moment(file.mtime).format('DD.MM.YYYY HH:mm')}</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>
      </div>
    )
  }
}

export default SZTM
