/** @format */

import React, { useEffect, useState } from 'react';
import { intervalToDuration } from 'date-fns';

const TimerUi = ({ reason, time }) => {
	const boxDialer = window.BoxDialer;
	const [dndTimer, setDndTimer] = useState(time);

	useEffect(() => {
		if (reason !== 'free') {
			var intervalId = setInterval(() => {
				setDndTimer((prevCount) => prevCount + 1);
			}, 1000);
			return () => clearInterval(intervalId);
		}
	}, [reason]);
	useEffect(() => {
		setDndTimer(time);
	}, [reason]);

	const dataFormatter = (secund) => {
		let ts = intervalToDuration({
			start: 0,
			end: secund * 1000,
		});
		return secund > 3599
			? `${ts.hours}:${ts.minutes}:${ts.seconds}`
			: `${ts.minutes}:${ts.seconds}`;
	};
	if (reason === 'free') {
		return <></>;
	}
	return (
		<span>
			{boxDialer?.timer.type !== 'free' && (
				<span>{dataFormatter(dndTimer)}</span>
			)}
		</span>
	);
};

export default TimerUi;
