import React, { useState } from "react";
import {
	Dialog,
	DialogActions,
	DialogContent,
	DialogTitle,
	Button,
	TextField,
	Typography,
	Box,
} from "@mui/material";
import { useForm } from "react-hook-form";

const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
	const {
		register,
		handleSubmit,
		reset,
		formState: { errors },
	} = useForm();
	const [isAvailable, setIsAvailable] = useState<boolean>(true); // Default is available

	// Get today's date in the format yyyy-mm-dd
	const today = new Date().toISOString().split("T")[0];

	const onSubmit = (data: {
		date: string;
		startHour: string;
		endHour: string;
	}) => {
		handleAddSlot({ ...data, isAvailable });
		reset();
		handleClose();
	};

	return (
		<Dialog open={open} onClose={handleClose}>
			<DialogTitle>Add EV Slot</DialogTitle>
			<DialogContent>
				<form onSubmit={handleSubmit(onSubmit)}>
					<TextField
						{...register("date", {
							required: "Date is required",
							validate: (value) =>
								value >= today || "Date cannot be in the past",
						})}
						label="Date"
						type="date"
						fullWidth
						margin="normal"
						InputLabelProps={{
							shrink: true,
						}}
						error={!!errors.date}
						helperText={errors.date?.message}
						// Set the min value to today's date
						inputProps={{ min: today }}
					/>
					<TextField
						{...register("startHour", {
							required: "Start hour is required",
						})}
						label="Start Hour"
						type="time"
						fullWidth
						margin="normal"
						InputLabelProps={{
							shrink: true,
						}}
						error={!!errors.startHour}
						helperText={errors.startHour?.message}
					/>
					<TextField
						{...register("endHour", {
							required: "End hour is required",
						})}
						label="End Hour"
						type="time"
						fullWidth
						margin="normal"
						InputLabelProps={{
							shrink: true,
						}}
						error={!!errors.endHour}
						helperText={errors.endHour?.message}
					/>
					{/* Availability Toggle */}
					<Box
						display="flex"
						alignItems="center"
						justifyContent="space-between"
						gap={2}
					>
						<Button
							onClick={() => setIsAvailable((prev) => !prev)}
							variant={isAvailable ? "contained" : "outlined"}
							color="primary"
						>
							Check Availability
						</Button>
						<Typography>
							{isAvailable ? "Available" : "Not Available"}
						</Typography>
					</Box>
					<DialogActions>
						<Button onClick={handleClose} color="secondary">
							Cancel
						</Button>
						
							<Button
								type="submit"
								sx={{
									backgroundColor: "#52ACDF",
									color: "white",
									borderRadius: "8px",
									width: "100px",
									"&:hover": { backgroundColor: "#439BC1" },
								}}
							>
								Add Booking
							</Button>
						
					</DialogActions>
				</form>
			</DialogContent>
		</Dialog>
	);
};

export default AddSlotModal;
