import useTimer from "@src/hooks/useTimer";
import { useEffect, useState } from "react";

export enum TimerDisplayFormat {
  Minutes,
  Hours,
  Days,
}

interface Props {
  expiryTimestamp: Date;
  displayFormat?: TimerDisplayFormat;
  customTextOnExpire?: string;
}

export const Timer = ({
  expiryTimestamp,
  displayFormat = TimerDisplayFormat.Days,
  customTextOnExpire,
}: Props) => {
  const [expired, setExpired] = useState(
    expiryTimestamp.getTime() < Date.now(),
  );
  const { seconds, minutes, hours, days, restart } = useTimer({
    expiryTimestamp,
    onExpire: () => setExpired(true),
  });

  useEffect(() => {
    restart(expiryTimestamp);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [expiryTimestamp]);

  return (
    <>
      {expired && customTextOnExpire ? (
        <>{customTextOnExpire}</>
      ) : (
        <>
          {displayFormat === TimerDisplayFormat.Minutes && (
            <span>{`${(days * 24 + hours) * 60 + minutes}:${seconds
              .toString()
              .padStart(2, "0")}`}</span>
          )}
          {displayFormat === TimerDisplayFormat.Hours && (
            <span>{`${days * 24 + hours}:${minutes
              .toString()
              .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`}</span>
          )}
          {displayFormat === TimerDisplayFormat.Days && (
            <span>{`${days}:${hours.toString().padStart(2, "0")}:${minutes
              .toString()
              .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`}</span>
          )}
        </>
      )}
    </>
  );
};