/* eslint-disable react/no-array-index-key */
/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import { buildArray, getPercentage } from 'sports-util';
import { statisticNames } from '../../../../constants/statisticsNames';

import ProgressBar from '../progress-bar';
import styles from './stats-list.module.scss';

const StatsList = ({ homeStats = {}, awayStats = {}, gameStatus }) => {
  const statistics = buildArray(homeStats)
    ?.filter((value) => buildArray(statisticNames).includes(value))
    .sort((a, b) => (statisticNames[a].order > statisticNames[b].order ? 1 : -1));

  if (gameStatus === 'Not started') {
    statistics.push('win_percentage');
  }

  return (
    <div className={styles.container}>
      {statistics?.map((key, index) => {
        let homeTeamVal = Number(homeStats[key]);
        let awayTeamVal = Number(awayStats[key]);
        let total = homeTeamVal + awayTeamVal;

        if (key === 'win_percentage') {
          const totalWins = Number(homeStats?.wins) + Number(awayStats?.wins);
          homeTeamVal = getPercentage(homeStats?.wins, totalWins);
          awayTeamVal = getPercentage(awayStats?.wins, totalWins);
          total = homeTeamVal + awayTeamVal;
        }

        return (
          <div className={styles.row} key={index}>
            <div className={styles.progBar}>
              <div className={styles.numberBox}>
                <span>{homeTeamVal}</span>
              </div>
              <ProgressBar total={total} value={homeTeamVal} />
            </div>
            <span className={styles.name}>{statisticNames[key]?.name}</span>
            <div className={styles.progBar}>
              <ProgressBar total={total} value={awayTeamVal} isAway />
              <div className={styles.numberBox}>
                <span>{awayTeamVal}</span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

StatsList.propTypes = {
  homeStats: PropTypes.shape({}),
  awayStats: PropTypes.shape({}),
};

export default StatsList;
