import React, { useEffect, Fragment, ReactElement } from 'react';
import useTimer, { UseTimer } from '../hooks/UseTimer';
import './TSCountdownTimer.scss';

interface Props {
  activeStart?: number;
  activeEnd?: number;
  startingText?: string;
  endingText?: string;
}

export const TSCountdownTimer = (
  props: Props,
): ReactElement<HTMLDivElement> => {
  const countdownTime =
    Date.now() > props.activeStart ? props.activeEnd : props.activeStart;

  const [timeLeft, setEndDate]: UseTimer = useTimer(countdownTime, true);

  useEffect(() => {
    timeLeft.isOver && timeLeft.currentEndDate == props.activeStart
      ? setEndDate(props.activeEnd)
      : false;
  }, [
    props.activeEnd,
    props.activeStart,
    setEndDate,
    timeLeft.currentEndDate,
    timeLeft.isOver,
  ]);

  return (
    <div className="countdown-timer">
      {timeLeft.isOver ? (
        'This Trunkshow Has Ended'
      ) : (
        <Fragment>
          {countdownTime == props.activeStart
            ? props.startingText
            : props.endingText}
          <span> {timeLeft.daysLeft + 'd'} </span>
          <span> {timeLeft.hoursLeft + 'h'} </span>
          <span> {timeLeft.minutesLeft + 'm'} </span>
          <span> {timeLeft.secondsLeft + 's'} </span>
        </Fragment>
      )}
    </div>
  );
};