function calculateRating(ratings) {
  const numberOfRatings = ratings.length
  const sumOfRatings = ratings.reduce(
    (accumulator, rating) => accumulator + rating.value,
    0
  )
  console.log(ratings, sumOfRatings, numberOfRatings)
  return numberOfRatings ? sumOfRatings / numberOfRatings : '-'
}

const TrainingArchive = props => (
  <div>
    <h2>Training Archive</h2>
    {console.log('archive', props)}
    <ol>
      {props.trainings.map(training => (
        <TrainingHint key={training.id} training={training} />
      ))}
    </ol>
  </div>
)

const TrainingHint = props => (
  <div>
    <div>{props.training.date}</div>
    <div>{props.training.title}</div>
  </div>
)

const Training = props => (
  <article>
    <h2>{props.title}</h2>
    <section id='info'>
      <p>
        <span className='caption'>Type: </span>
        <span className='data'>{props.type.name}</span>
      </p>
      <p>
        <span className='caption'>Date: </span>
        <span className='data'>{(new Date(props.trainingDate)).toLocaleDateString()}</span>
      </p>
      <p>
        <span className='caption'>Location: </span>
        <span className='data'>{props.location}</span>
      </p>
      <p>
        <span className='caption'>Registrations: </span>
        <span className='data'>{props.registration.length} <a href=''>Register!</a></span>
      </p>
      <p>
        <span className='caption'>Attendance: </span>
        <span className='data'>{props.attendance}</span>
      </p>
      <p>
        <span className='caption'>Rating: </span>
        <span className='data'>{calculateRating(props.ratings)} [<a href=''>{props.ratings.length}</a>]
          Rate it!
          <a href=''>*</a>
          <a href=''>*</a>
          <a href=''>*</a>
          <a href=''>*</a>
          <a href=''>*</a>
        </span>
      </p>
    </section>
    <section id='content'>
      <h3>Content</h3>
      {props.content.sort(block => block.sequence).map(block => <Block key={block.id} {...block} />)}
    </section>
  </article>
)

const Block = props => <article>
  <h2>{props.title}</h2>
  <section id='info'>
    <p>
      <span className='caption'>Duration: </span>
      <span className='data'>{props.duration}</span>
    </p>
    <p>
      <span className='caption'>Variation: </span>
      <span className='data'>{props.variation}</span>
    </p>
    <p>
      <span className='caption'>Format: </span>
      <span className='data'>{props.format.name}</span>
    </p>
    <p>
      <span className='caption'>Description: </span>
      <span className='data'>{props.description}</span>
    </p>
  </section>
</article>

class TrainingCreateForm extends React.Component {
  render() {
    return <form>
      <label htmlFor="title">Title<input type="text" id="title" /></label>
      <label htmlFor="title">Title<input type="text" id="title" /></label>
      <label htmlFor="title">Title<input type="text" id="title" /></label>
    </form>
  }
}

export { TrainingArchive }
export default Training