/* eslint-disable no-shadow */
/* eslint-disable react/prop-types */
import React from 'react';
import Football from './icons/football';
import YellowCard from './icons/yellowcard';
import RedCard from './icons/redcard';
import GreenArrow from './icons/greenarrow';
import RedArrow from './icons/redarrow';
import MissedGoal from './icons/missed-goal';
import OwnGoal from './icons/own-goal';
import PenaltySaved from './icons/penalty-saved';
import PenaltyScored from './icons/penalty-scored';
import FieldGoal from './icons/field-goal';
import Touchdown from './icons/touchdown';
import ExtraPoint from './icons/extra-point';
import TwoPointConversion from './icons/two-point-conversation';
import Safety from './icons/safety';
import styles from './incident.module.scss';

export const calcMatchTime = (matchTime = 0) => {
  const quarter = Math.ceil(matchTime / 900);
  const minutes = Math.floor((900 * quarter - matchTime) / 60);
  const seconds = (900 * quarter - matchTime) % 60;

  return `${quarter === 5 ? 'OT' : `Q${quarter}`} ${minutes}:${`0${seconds}`.slice(-2)}`;
};

export const renderIcon = (goalType, sportName) => {
  switch (sportName) {
    case 'am. football':
      switch (goalType) {
        case 'Field goal':
          return <FieldGoal />;
        case 'Touchdown':
          return <Touchdown />;
        case 'Extra Point':
          return <ExtraPoint />;
        case '2 Point Conversion':
          return <TwoPointConversion />;
        case 'Safety':
          return <Safety />;
        default:
          return <FieldGoal />;
      }
    default: {
      switch (goalType) {
        case 'Regular goal':
        case 'Regular penalty':
        case 'Extratime Goal':
          return <Football />;
        case 'Extratime missed penalty':
        case 'Penalty shootout missed':
        case 'Missed penalty':
          return <MissedGoal />;
        case 'Own goal':
        case 'Extratime own goal':
          return <OwnGoal />;
        case 'Penalty Try':
          return <PenaltySaved />;
        case 'Penalty':
          return <PenaltyScored />;
        default:
          return <Football />;
      }
    }
  }
};

export default function Incident({ incident, sportName }) {
  const matchTime =
    sportName === 'am. football' ? calcMatchTime(incident?.match_time) : `${incident?.match_time}'`;

  const renderIncident = (incident) => {
    switch (incident?.code) {
      case 'assist':
        return (
          <div
            className={`${styles.incident} ${styles.assist} ${incident.home ? '' : styles.away}`}
          >
            <div>{incident.player.name}</div>
            <div className={styles.time} />
          </div>
        );
      case 'goal':
        return (
          <div className={`${styles.incident} ${incident.home ? '' : styles.away}`}>
            <div>
              <span>{incident.player.name}</span>
              {renderIcon(incident?.type, sportName)}
              <div className={styles.time}>{matchTime}</div>
            </div>
          </div>
        );
      case 'subst':
        return (
          <div className={`${styles.incident} ${incident.home ? '' : styles.away}`}>
            <div>
              <span>{incident.player.name}</span>
              <RedArrow />
              <div className={styles.time}>{matchTime}</div>
            </div>
          </div>
        );
      case 'subst_in':
        return (
          <div
            className={`${styles.incident} ${styles.subsIn} ${incident.home ? '' : styles.away}`}
          >
            <div>
              <span>{incident.player.name}</span>
              <GreenArrow />
              <div className={styles.time} />
            </div>
          </div>
        );
      case 'card':
        return (
          <div className={`${styles.incident} ${incident.home ? '' : styles.away}`}>
            <div>
              <span>{incident.player.name}</span>
              {incident.type === 'Yellow card' ? <YellowCard /> : <RedCard />}
              <div className={styles.time}>{matchTime}</div>
            </div>
          </div>
        );
      default:
        return <></>;
    }
  };

  return <>{renderIncident(incident)}</>;
}
