import React, { Fragment } from 'react';
import useTimer from '../hooks/UseTimer';
import './PDPTSTimer.scss';
import ClockIcon from '@moda/icons/clock-16';

interface Props {
  countdownTime: number;
  countdownEndMessage: string;
  endingText?: string;
  hasZeroes?: boolean;
  hasIcon?: boolean;
}

export const PDPTSTimer: React.FC<Props> = ({
  hasZeroes,
  countdownTime,
  countdownEndMessage,
  hasIcon,
}) => {
  const [timeLeft] = useTimer(countdownTime, hasZeroes);
  const showTimer = parseInt(timeLeft.daysLeft, 10) < 40;
  const timerStyle =
    parseInt(timeLeft.daysLeft, 10) <= 3
      ? 'PDPTSTimer PDPTSTimer--ending-soon'
      : 'PDPTSTimer';

  return (
    <div className={timerStyle}>
      {timeLeft.isOver && (
        <Fragment>
          <ClockIcon className="PDPTSTimer__icon" />
          {countdownEndMessage}
        </Fragment>
      )}
      {!timeLeft.isOver && showTimer && (
        <Fragment>
          {hasIcon && <ClockIcon className="PDPTSTimer__icon" />}
          Ends in
          <span> {timeLeft.daysLeft + 'd'} </span>
          <span> {timeLeft.hoursLeft + 'h'} </span>
          <span> {timeLeft.minutesLeft + 'm'} </span>
        </Fragment>
      )}
    </div>
  );
};