import { useState, useEffect } from 'react';
import './BSTImer.scss';

import { ExtractDateFormate } from '../../../../Services/Others';

const useCurrentTime = () => {
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return currentTime;
};

const LiveTimer = () => {
  // Initialize state for current time
  const [currentTime, setCurrentTime] = useState(new Date());

  // useEffect to update the current time every second
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    // Cleanup function to clear interval when the component unmounts
    return () => {
      clearInterval(timerID);
    };
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Function to update the current time
  const tick = () => {
    setCurrentTime(new Date());
  };

  // Format time to 12-hour format with AM/PM
  const hours = String(currentTime.getHours() % 12 || 12).padStart(2, '0');
  const minutes = String(currentTime.getMinutes()).padStart(2, '0');
  const seconds = String(currentTime.getSeconds()).padStart(2, '0');
  const ampm = currentTime.getHours() >= 12 ? 'PM' : 'AM';

  return (
    <div>
      <p>
        {hours}:{minutes}:{seconds} {ampm}
      </p>
    </div>
  );
};

export default LiveTimer;

export const TimeDisplay = () => {
  const currentTime = useCurrentTime();

  const formatTime = (date) =>
    date.toLocaleTimeString('en-US', {
      hour12: true,
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    });

  return <div className="timedate">{formatTime(currentTime)}</div>;
};

export const DateDisplay = () => {
  const currentDate = useCurrentTime();

  return <div className="datesNew">{ExtractDateFormate(currentDate)}</div>;
};