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

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

  handleChange(event) {
    event.preventDefault()
    const { filterPlayers } = this.props.swisstennisActions
    const nextFilter = {
      p_name: this.name.value,
      p_category: this.category.value,
      p_ranking: this.ranking.value,
      p_phone: this.phone.value,
      p_email: this.email.value,
      p_junior: this.junior.value,
      p_paid: this.paid.value,
    }
    filterPlayers(nextFilter)
  }

  render() {
    const state = this.props.swisstennis
    const { setRecipients } = this.props.smsActions
    const { playerList, filteredPlayers, filter } = state

    return (
      <div>
        <form>
          <p>
            {filteredPlayers.length}/{playerList && playerList.players.length}{' '}
            Spieler >{' '}
            <Link to='/sms' onClick={() => setRecipients(filteredPlayers)}>
              SMS
            </Link>
          </p>
          <label htmlFor='matchfilter'>Match Filter benutzen</label>
          <input
            type='checkbox'
            ref={(input) => {
              this.matchfilter = input
            }}
            id='matchfilter'
            checked={filter.matchfilter}
            onChange={this.handleChange}
          />
          <table className='table table-bordered table-striped'>
            <thead>
              <tr>
                <th>Name</th>
                <th>Klassierung</th>
                <th>Kategorie</th>
                <th>Telefon</th>
                <th>E-Mail</th>
                <th>Junior</th>
                <th>Bezahlt</th>
              </tr>
              <tr>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.name = input
                    }}
                    id='name'
                    value={filter.name}
                    placeholder='Name'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.ranking = input
                    }}
                    id='ranking'
                    value={filter.ranking}
                    placeholder='Klassierung'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <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.phone = input
                    }}
                    id='phone'
                    value={filter.phone}
                    placeholder='Telefon'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td>
                  <input
                    type='input'
                    ref={(input) => {
                      this.email = input
                    }}
                    id='email'
                    value={filter.email}
                    placeholder='E-Mail'
                    onChange={this.handleChange}
                  ></input>
                </td>
                <td>
                  <select
                    ref={(input) => {
                      this.junior = input
                    }}
                    id='junior'
                    value={filter.junior}
                    onChange={this.handleChange}
                  >
                    <option value='-1'>-</option>
                    <option value='1'>Junior</option>
                    <option value='0'>Erwachsen</option>
                  </select>
                </td>
                <td>
                  <select
                    ref={(input) => {
                      this.paid = input
                    }}
                    id='paid'
                    value={filter.paid}
                    onChange={this.handleChange}
                  >
                    <option value='-1'>-</option>
                    <option value='1'>bezahlt</option>
                    <option value='0'>offen</option>
                  </select>
                </td>
              </tr>
            </thead>
            <tbody>
              {filteredPlayers.map((player, key) => (
                <tr key={key}>
                  <td>{player.fullName}</td>
                  <td>{player.ranking}</td>
                  <td>{player.category}</td>
                  <td>{player.phone}</td>
                  <td>{player.email}</td>
                  <td>{player.junior ? '\u2713' : '\u2717'}</td>
                  <td>{player.paid ? '\u2713' : '\u2717'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </form>
      </div>
    )
  }
}

export default Players
