import React from 'react'
import { date2s, time2s } from '../../helpers.js'

class MatchRow extends React.Component {
  render () {
    const match = this.props.match
    return (
      <tr>
        <td>{match.Ort || <strong>Kein Platz zugeteilt</strong>}</td>
        <td>{match.Datum ? date2s(match.Datum) : <strong>Kein Datum zugeteilt</strong>}</td>
        <td>{match.Datum ? time2s(match.Datum) : <strong>Keine Zeit zugeteilt</strong>}</td>
        <td>{match.Konkurrenz}</td>
        <td>{match.Spieler1}</td>
        <td>{match.Spieler2}</td>
      </tr>
    )
  }
}

class MatchTable extends React.Component {
  render () {
    console.log(this.props)
    const matches = this.props.match.allMatches
    const filtered = this.props.match.filteredMatches

    return (
      <div>
        <h2>Matches ({filtered.length}/{matches.length})</h2>
        <table className='table table-bordered table-striped'>
          <thead>
            <tr>
              <th>Ort</th>
              <th>Datum</th>
              <th>Zeit</th>
              <th>Konkurrenz</th>
              <th>Spieler 1</th>
              <th>Spieler 2</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((match, key) =>
              <MatchRow key={key} match={match} />
            )}
          </tbody>
        </table>
      </div>
    )
  }
}

export default MatchTable