import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
	Button,
	Dialog,
	DialogTitle,
	Box,
	CircularProgress,
} from "@mui/material";
import { styled } from "@mui/system";
import {
	fetchAvailableSlots,
} from "../../redux/slices/slotSlice"; // Update with the correct import path

const SlotButton = styled(Button)<{ selected: boolean }>(({ selected }) => ({
	backgroundColor: selected ? "#1976d2" : "#333",
	color: "#fff",
	border: "1px solid #555",
	width: "120px",
	height: "40px",
	margin: "5px",
	"&:hover": {
		backgroundColor: selected ? "#1565c0" : "#444",
	},
}));

const AvailableSlotsModal = ({
	open,
	onClose,
}: {
	open: boolean;
	onClose: () => void;
}) => {
	const dispatch = useDispatch();

	// Fetch slots from the Redux store
	const { availableSlots, loading, error } = useSelector(
		(state: any) => state.slotReducer.availableSlots
	); // Adjust selector path
	const [selectedSlot, setSelectedSlot] = useState<typeof availableSlots | null>(
		null
	);

	useEffect(() => {
		if (open) {
			// Fetch available slots when the modal opens
			dispatch(fetchAvailableSlots());
		}
	}, [open, dispatch]);

	const handleSlotSelect = (slot: typeof availableSlots) => {
		setSelectedSlot(slot); // Update the selected slot
	};

	const handleSave = () => {
		// Save the selected slot (you can dispatch an action here if needed)
		console.log("Selected Slot: ", selectedSlot);
		onClose(); // Close the modal after saving
	};

	return (
		<Dialog open={open} onClose={onClose}>
			<DialogTitle sx={{ color: "#fff", background: "#222" }}>
				Available Slots
			</DialogTitle>
			<Box
				sx={{
					background: "#111",
					padding: "20px",
					display: "flex",
					flexWrap: "wrap",
					justifyContent: "center",
				}}
			>
				{loading ? (
					<CircularProgress color="primary" />
				) : error ? (
					<div style={{ color: "red" }}>Error: {error}</div>
				) : Array.isArray(availableSlots) &&
				  availableSlots.length > 0 ? (
					availableSlots.map((slot:  availableSlots) => (
						<SlotButton
							key={slot?.id}
							onClick={() => handleSlotSelect(slot)}
							selected={selectedSlot?.id === slot?.id}
						>
							{`${slot?.startTime} - ${slot?.endTime}`}
						</SlotButton>
					))
				) : (
					<div>No available slots</div>
				)}
				<Button
					variant="contained"
					color="primary"
					sx={{ marginTop: "10px" }}
					onClick={handleSave}
					disabled={!selectedSlot}
				>
					Save
				</Button>
			</Box>
		</Dialog>
	);
};

export default AvailableSlotsModal;
