const [options, setOptions] = useState([
{ id: 1, name: 'Mohsan', time: '11:00 AM' },
{ id: 2, name: 'John', time: '12:00 PM' },
{ id: 3, name: 'Alex', time: '1:00 PM' },
{ id: 4, name: 'Sarah', time: '2:00 PM' },
{ id: 5, name: 'David', time: '3:00 PM' },
{ id: 6, name: 'Emma', time: '4:00 PM' },
{ id: 7, name: 'Michael', time: '5:00 PM' },
{ id: 8, name: 'James', time: '6:00 PM' },
{ id: 9, name: 'Liam', time: '7:00 PM' },
{ id: 10, name: 'Noah', time: '8:00 PM' },
{ id: 11, name: 'Olivia', time: '9:00 PM' },
{ id: 12, name: 'Sophia', time: '10:00 PM' },
{ id: 13, name: 'Ava', time: '11:00 PM' },
]);
const [selectedOption, setSelectedOption] = useState(() => {
const savedOption = localStorage.getItem('selectedOption');
if (savedOption) {
try {
return JSON.parse(savedOption);
} catch (e) {
console.error('Error parsing savedOption:', e);
return options[0]; // Fallback to the first option
}
}
return options[0]; // Default to the first option
});
const [remainingTime, setRemainingTime] = useState('');
const [closingTime, setClosingTime] = useState('');
// Function to calculate the remaining time or "Closed" for today
const calculateTimeRemaining = (selectedTime) => {
const currentTime = new Date();
const currentDate = currentTime.toLocaleDateString();
const currentTimeInSeconds = currentTime.getTime() / 1000;
const selectedOptionTime = new Date(`${currentDate} ${selectedTime}`);
const selectedTimeInSeconds = selectedOptionTime.getTime() / 1000;
if (selectedTimeInSeconds <= currentTimeInSeconds) {
return 'Closed';
}
const timeRemaining = selectedTimeInSeconds - currentTimeInSeconds;
const hours = Math.floor(timeRemaining / 3600);
const minutes = Math.floor((timeRemaining % 3600) / 60);
const seconds = Math.floor(timeRemaining % 60);
return `${hours}hrs ${minutes}mins ${seconds}sec left`;
};
// Function to calculate closing time (9 minutes before selected time)
const calculateClosingTime = (selectedTime) => {
const currentDate = new Date().toLocaleDateString();
const selectedOptionTime = new Date(`${currentDate} ${selectedTime}`);
selectedOptionTime.setMinutes(selectedOptionTime.getMinutes() - 9);
return selectedOptionTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};
// Function to handle option selection
const handleOptionSelect = (option) => {
setSelectedOption(option);
localStorage.setItem('selectedOption', JSON.stringify(option)); // Save selected option in localStorage
const time = calculateTimeRemaining(option.time);
setRemainingTime(time);
const closing = calculateClosingTime(option.time);
setClosingTime(closing);
};
// Handle automatic switching when the option has passed
const autoSwitchOption = () => {
const currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const nextOption = options.find((option) => {
const optionTime = new Date(`${new Date().toLocaleDateString()} ${option.time}`).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
return currentTime < optionTime;
});
if (nextOption && selectedOption && nextOption.id !== selectedOption.id) {
handleOptionSelect(nextOption);
}
};
// Update remaining time and handle automatic switching
useEffect(() => {
const interval = setInterval(() => {
if (selectedOption) {
const time = calculateTimeRemaining(selectedOption.time);
setRemainingTime(time);
if (time === 'Closed') {
autoSwitchOption();
}
}
}, 1000);
return () => clearInterval(interval);
}, [selectedOption, options]);
// Reset the timer at midnight
useEffect(() => {
const now = new Date();
const nextDay = new Date(now);
nextDay.setDate(now.getDate() + 1);
nextDay.setHours(0, 0, 0, 0);
const timeUntilMidnight = nextDay.getTime() - now.getTime();
const resetTimer = setTimeout(() => {
setRemainingTime('');
}, timeUntilMidnight);
return () => clearTimeout(resetTimer);
}, []);