import React from 'react';
import { getH2HStats, getValue, groupBy, formatDate } from 'sports-util';
import styles from './head2head.module.scss';

export default function index({ head2head }) {
  const groupedMatches = groupBy(head2head, 'competition.name');
  const h2hStats = getH2HStats('soccer', head2head);

  return (
    <div>
      <div className={styles.statContainer}>
        {h2hStats.map((stat) => (
          <div>
            <span>{stat.value}</span>
            <p>{stat.label}</p>
          </div>
        ))}
      </div>
      <div>
        {Object.entries(groupedMatches).map((tournament) => (
          <>
            <p className={styles.label}>{tournament[0]}</p>
            {tournament[1].map((match) => {
              const homeTeam = match.competitors[0];
              const awayTeam = match.competitors[1];

              const homeTeamResult = getValue(homeTeam.results, 'finalresult', true, true);
              const awayTeamResult = getValue(awayTeam.results, 'finalresult', true, true);

              return (
                <div className={styles.matchRow}>
                  <span>{formatDate(match.start_date, 'head_to_head', true)}</span>
                  <div>
                    <p>{homeTeam.participant.name}</p>
                    <p>{awayTeam.participant.name}</p>
                  </div>
                  <div>
                    <p>{homeTeamResult}</p>
                    <p>{awayTeamResult}</p>
                  </div>
                </div>
              );
            })}
          </>
        ))}
      </div>
    </div>
  );
}
