/* eslint-disable react/prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import { buildRows, getSportColumns, sortByTabs } from '../../../helpers/standings';
import styles from './tournament-standings.module.scss';

export default function TournamentStandings({ serverData, pageContext }) {
  const { page } = pageContext;

  function getStandingsData(standings) {
    const sportName = 'football';
    const dataTable = [];
    const dataHedings = [];
    const filteredColumns = getSportColumns(sportName, 'overall');
    const filteredRows = buildRows(
      sortByTabs(standings, 'overall', sportName),
      filteredColumns,
      'overall'
    );

    dataHedings.push(filteredColumns);
    dataTable.push(filteredRows);
    return [dataHedings, dataTable];
  }

  const getTournamentInfo = (stageId) => {
    const info = page.relation.tournaments.filter(
      (tournament) => tournament.stage_id === parseInt(stageId)
    );
    return info.length >= 1 ? info[0] : null;
  };

  const getStandingsTables = Object.keys(serverData).map((stageId) => {
    const data = getStandingsData(serverData[stageId].standings);
    const tournamentInfo = getTournamentInfo(stageId);
    return (
      <div>
        <h2>{tournamentInfo.name || ''}</h2>
        <table className={styles.standingsTable}>
          <thead>
            <tr>
              {data[0][0].map((column) => (
                <th>{column.label}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data[1][0].map((row, idx) => (
              // eslint-disable-next-line react/no-array-index-key
              <tr key={idx}>{row}</tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  });

  return <div className={styles.container}>{getStandingsTables}</div>;
}

TournamentStandings.propTypes = {
  mockData: PropTypes.shape({}),
};
