import React from "react";
import {
	Box,
	Button,
	Dialog,
	DialogTitle,
	DialogContent,
	Tabs,
	Tab,
	Typography,
} from "@mui/material";

import { useSelector } from "react-redux";
import { RootState } from "../../redux/reducers";
type Slot = {
	id: string;
	startTime: string;
	endTime: string;
	isAvailable?: boolean;
};

interface SlotPickerModalProps {
	open: boolean;
	handleClose: () => void;
	selectedSlotId: string | null;
	onSelect: (slot: Slot) => any;
}


export default function SlotPickerModal({
	open,
	handleClose,

	selectedSlotId,
	onSelect,
}: SlotPickerModalProps) {
		const availableSlots = useSelector(
		(state: RootState) => state.slotReducer.availableSlots || []
	);
// eslint-disable-next-line @typescript-eslint/no-redeclare



	return (
		<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
			<DialogTitle>Select a Time Slot</DialogTitle>
			<DialogContent>
				<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
					{availableSlots.map((slot) => {
						const isDisabled = !slot?.isAvailable;
						const label = `${slot?.startTime} - ${slot?.endTime}`;
						return (
							<Button
								key={slot?.id}
								variant={
									selectedSlotId === slot?.id
										? "contained"
										: "outlined"
								}
								color="primary"
								disabled={isDisabled}
								onClick={() => onSelect(slot)}
							>
								{label}
							</Button>
						);
					})}
				</Box>
			</DialogContent>
		</Dialog>
	);
}
