import "./event-countdown.css";
import React from 'react';
import DateTimeDisplay from './date-time-display';
import useCountdown from './event-countdown';

const ExpiredNotice = () => {
  return (
    <div className="expired-notice">
      <span>Congratulations!</span>
      <p>Your event has completed!</p>
    </div>
  );
};

const ShowCounter = ({ days, hours, minutes, seconds }) => {
  return (
    <div className="show-counter">
      <a
        target="_blank"
        rel="noopener noreferrer"
        className="countdown-link"
      >
        <DateTimeDisplay value={days} type={'Days'} isDanger={days <= 3} />
        <DateTimeDisplay value={hours} type={'Hours'} isDanger={false} />
        <DateTimeDisplay value={minutes} type={'Mins'} isDanger={false} />
        <DateTimeDisplay value={seconds} type={'Seconds'} isDanger={false} />
      </a>
    </div>
  );
};

const CountdownTimer = ({ targetDate }) => {
  const [days, hours, minutes, seconds] = useCountdown(targetDate);

  if (days + hours + minutes + seconds <= 0) {
    return <ExpiredNotice />;
  } else {
    return (
      <div class="counter">
        <ShowCounter
        days={days}
        hours={hours}
        minutes={minutes}
        seconds={seconds}
        />
      </div>
    );
  }
};

export default CountdownTimer;