import { Progress, Statistic } from "antd";
import { useEffect, useRef, useState } from "react";

const { Countdown } = Statistic;

interface IProgress {
  timeOut: () => void;
}

let listener: string | number | NodeJS.Timeout | undefined;

const ProgressTimer = ({ timeOut }: IProgress) => {
  const currentTime = useRef(Date.now());
  const [percent, setPercent] = useState(0);
  const deadline = currentTime.current + 5 * 60 * 1000;

  useEffect(() => {
    listener = setTimeout(() => {
      setPercent(
        ((deadline - Date.now()) / (deadline - currentTime.current)) * 100
      );
    }, 1000);
    return () => clearTimeout(listener);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [percent]);

  return (
    <Progress
      strokeColor={{
        "0%": "#2C3489",
        "100%": "#7B61FF",
      }}
      strokeWidth={12}
      type="circle"
      percent={percent}
      className="ivry-timer"
      format={() => (
        <Countdown value={deadline} format="mm:ss" onFinish={timeOut} />
      )}
    />
  );
};

export default ProgressTimer;