import React, { useState, useRef, useEffect } from "react"; import {THRESH_HOLD} from "../../utils/constants" const TimePicker = ({ label, onChange, interval = 10, value,checkInTime,checkOutTime }) => { const [time, setTime] = useState(value || ""); const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); const slotRefs = useRef({}); const getCurrentTime = () => { const now = new Date(); const minutes = now.getMinutes(); const roundedMinutes = Math.round(minutes / interval) * interval; now.setMinutes(roundedMinutes); now.setSeconds(0); now.setMilliseconds(0); return now; }; const formatTime = (date) => { let hours = date.getHours(); const minutes = date.getMinutes(); const period = hours >= 12 ? "PM" : "AM"; hours = hours % 12; // Convert 24-hour format to 12-hour format hours = hours ? hours : 12; // The hour '0' should be '12' const hoursFormatted = hours < 10 ? `0${hours}` : hours; // Ensure two-digit hour const minutesFormatted = minutes < 10 ? `0${minutes}` : minutes; // Ensure two-digit minutes return `${hoursFormatted}:${minutesFormatted} ${period}`; }; const generateTimeSlots = () => { const slots = []; const now = new Date(); const currentSlot = new Date(); currentSlot.setMinutes( Math.floor(currentSlot.getMinutes() / interval) * interval ); currentSlot.setSeconds(0); currentSlot.setMilliseconds(0); const checkInDate = checkInTime ? new Date(checkInTime) : null; const checkOutDate = checkOutTime ? new Date(checkOutTime) : null; const dayStart = new Date(); const dayEnd = new Date(); if (checkInDate) { dayStart.setTime(checkInDate.getTime()); dayEnd.setTime(checkInDate.getTime()); } dayStart.setHours(0, 0, 0, 0); dayEnd.setHours(23, 59, 59, 999); let minSelectable = null; let maxSelectable = null; // Activity 0: Time slots based on current time if (!checkInDate) { // Case 1: No check-in time (new check-in) minSelectable = new Date(dayStart); maxSelectable = new Date(currentSlot); } // Activity 1: Time slots based on check-in time today else if (checkInDate && !checkOutDate) { const hoursDiff = (now - checkInDate) / (1000 * 60 * 60); if (hoursDiff < THRESH_HOLD) { // Case 2: Check-in present, no checkout, within THRESH_HOLD hours minSelectable = new Date(checkInDate); maxSelectable = new Date(currentSlot); } else { // Case 4: Check-in present, no checkout, more than THRESH_HOLD hours minSelectable = new Date(checkInDate); maxSelectable = new Date(dayEnd); } } else if (checkInDate && checkOutDate) { // Case 3: Both check-in and checkout present const isSameDay = new Date(checkOutDate).toDateString() === new Date().toDateString(); minSelectable = new Date(checkOutDate); maxSelectable = isSameDay ? new Date(dayEnd) : new Date(currentSlot); } const slot = new Date(dayStart.getTime()); while (slot <= dayEnd) { const formatted = formatTime(slot); const isSelectable = slot >= minSelectable && slot <= maxSelectable; slots.push({ time: formatted, isSelectable }); slot.setMinutes(slot.getMinutes() + interval); } return slots; }; const handleSelect = (selectedTime) => { setTime(selectedTime); if (onChange) onChange(selectedTime); setIsOpen(false); }; useEffect(() => { const handleClickOutside = (event) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { setIsOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); useEffect(() => { if (!value) { const defaultTime = formatTime(getCurrentTime()); setTime(defaultTime); if (onChange) onChange(defaultTime); } }, [value, interval, onChange]); useEffect(() => { if (isOpen && time && slotRefs.current[time]) { const selectedSlot = slotRefs.current[time]; selectedSlot.scrollIntoView({ behavior: "smooth", block: "center", }); } }, [isOpen, time]); return (