/* eslint-disable react/no-unused-prop-types */
/* eslint-disable no-shadow */
/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import PropTypes from 'prop-types';

import StatsList from '../../atoms/statistics/stats-list';
import LazyImage from '~hooks/lazy-image';
import styles from './statistics.module.scss';

const Statistics = ({ eventDetails, statistics }) => {
  const gameStatus = eventDetails?.status?.name;

  const [homeTeam, awayTeam] = statistics;

  const [homeStats, awayStats] = [homeTeam.statistics, awayTeam.statistics];

  const TeamDefImg = ({ alt = '' }) => (
    <img alt={alt} src="../../../../../images/default.svg" width={136} height={136} />
  );

  const team = (team) => (
    <div className={styles.team}>
      <LazyImage
        src={`https://di0up76ym3ymc.cloudfront.net/logos/team/${team.participant.id}.png`}
        alt={team.name}
        width={48}
        height={48}
        loading="eager"
        defaultImg={<TeamDefImg alt={team.name} />}
      />
      <p>{team.participant.name}</p>
    </div>
  );

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        {team(homeTeam.competitor)}
        {team(awayTeam.competitor)}
      </div>
      <StatsList gameStatus={gameStatus} homeStats={homeStats} awayStats={awayStats} />
    </div>
  );
};

Statistics.propTypes = {
  id: PropTypes.string,
};

export default Statistics;
