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

  componentDidMount () {
    console.log('Matches did mount', this)
    const { matchesGetMatchesRequest } = this.props.matchesActions
    matchesGetMatchesRequest()
  }

  handleChange (event) {
    event.preventDefault()
    const { matchesSetFilter } = this.props.matchesActions
    const nextFilter = {
      category: this.category.value,
      date: this.date.value,
      time: this.time.value,
      place: this.place.value,
      player: this.player.value,
      result: this.result.value
    }
    matchesSetFilter(nextFilter)
  }

  render () {
    const state = this.props.matches
    const actions = this.props.matchesActions
    const { setRecipients } = this.props.smsActions
    const { matches, 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}/{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(match.date).format('DD.MM.YYYY')}</td>
                <td>{moment(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