import React from 'react'
import { Link } from 'react-router-dom'
import moment from 'moment'

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

  handleChange(event) {
    event.preventDefault()
    const { filterMatches } = this.props.swisstennisActions
    const nextFilter = {
      m_category: this.category.value,
      m_date: this.date.value,
      m_time: this.time.value,
      m_place: this.place.value,
      m_player: this.player.value,
      m_result: this.result.value,
    }
    filterMatches(nextFilter)
  }

  render() {
    const state = this.props.swisstennis
    const { setRecipients } = this.props.smsActions
    const { calendar, filteredMatches, filter } = state
    const participatingPlayers = []
    filteredMatches.forEach((match) => {
      if (match.player1) participatingPlayers.push(match.player1)
      if (match.player2) participatingPlayers.push(match.player2)
    })

    return (
      <div>
        <p>
          {filteredMatches.length}/{calendar && calendar.matches.length} Spiele,{' '}
          {participatingPlayers.length} Spieler >{' '}
          <Link to='/sms' onClick={() => setRecipients(participatingPlayers)}>
            SMS
          </Link>
        </p>
        <form>
          <table className='table table-bordered table-striped'>
            <thead>
              <tr>
                <th>Kategorie</th>
                <th>Datum</th>
                <th>Zeit</th>
                <th>Ort</th>
                <th>Spieler 1</th>
                <th>Spieler 2</th>
                <th>Resultat</th>
              </tr>
              <tr>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.category = input
                    }}
                    id='category'
                    value={filter.category}
                    placeholder='Kategorie'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.date = input
                    }}
                    id='date'
                    value={filter.date}
                    placeholder='Datum'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.time = input
                    }}
                    id='time'
                    value={filter.time}
                    placeholder='Zeit'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.place = input
                    }}
                    id='place'
                    value={filter.place}
                    placeholder='Ort'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td colSpan={2}>
                  <input
                    type='input'
                    ref={(input) => {
                      this.player = input
                    }}
                    id='player'
                    value={filter.player}
                    placeholder='Spieler'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.result = input
                    }}
                    id='result'
                    value={filter.result}
                    placeholder='Resultat'
                    onChange={this.handleChange}
                  ></input>
                </td>
              </tr>
            </thead>
            <tbody>
              {filteredMatches.map((match, key) => (
                <tr key={key}>
                  <td>{match.category}</td>
                  <td>{moment.utc(match.date).format('DD.MM.YYYY')}</td>
                  <td>{moment.utc(match.date).format('HH:mm')}</td>
                  <td>{match.place}</td>
                  <td>{match.player1 ? match.player1.fullName : ''}</td>
                  <td>{match.player2 ? match.player2.fullName : ''}</td>
                  <td>{match.result}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </form>
      </div>
    )
  }
}

export default Matches
