/* eslint-disable camelcase */
import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import PropTypes from 'prop-types';
import { getTimeByTimeZone } from 'sports-util';
import styles from './score.module.scss';
import { useCountdown } from '../../../hooks/useCounter';

function ScoreComponent({ homeTeamGoal, awayTeamGoal, status, start_date }) {
  const timeZoneStartGame = getTimeByTimeZone(start_date);
  const [days, hours, minutes, seconds] = useCountdown(timeZoneStartGame);
  const calDays = days !== '00' ? days : null;

  const currentTime = new Date().getTime();

  const gameStillNotStarted = !!(
    timeZoneStartGame.getTime() < currentTime && status === 'Not started'
  );

  function notStarted() {
    return gameStillNotStarted ? (
      <span>- -</span>
    ) : (
      <>
        <p className={styles.date}>{timeZoneStartGame.toDateString()}</p>
        <p className={styles.counter}>{`Starts in ${
          calDays !== null ? `${calDays}:` : ''
        }${hours}:${minutes}:${seconds}`}</p>
      </>
    );
  }

  const results = () => (
    <>
      <p className={styles.result}>
        <span>{homeTeamGoal}</span>
        <span>{awayTeamGoal}</span>
      </p>
      <p className={styles.status}>{status}</p>
    </>
  );

  function allViews() {
    switch (status) {
      case 'Not started':
        return notStarted();
      case 'Cancelled':
      case 'Postponed':
        return <span>{status}</span>;
      case 'Started':
      case 'Finished':
        return results();
      default:
        return results();
    }
  }

  return <div className={styles.score}>{allViews()}</div>;
}

ScoreComponent.propTypes = {
  homeTeamGoal: PropTypes.number,
  awayTeamGoal: PropTypes.number,
  status: PropTypes.string,
  start_date: PropTypes.string,
};

export default ScoreComponent;
