import React, { useState, useEffect } from 'react';
import './BSTImer.scss';
import { FaCalendar } from "react-icons/fa";
import { GoClockFill } from "react-icons/go";
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();

    // const formatDate = (date) => {
    //     const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    //     const months = [
    //         "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    //         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    //     ];
    //     return `${days[date.getDay()]} ${date.getDate()} ${months[date.getMonth()]}`;
    // };

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