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

interface FormValues {
	city: string;
}

const AddStationLocationModal = ({
	open,
	handleClose,
	handleAddStation,
}: any) => {
	const {
		register,
		handleSubmit,
		reset,
		formState: { errors },
	} = useForm<FormValues>();

	const onSubmit: SubmitHandler<FormValues> = (data) => {
		handleAddStation(data);
		reset();
		handleClose();
	};

	return (
		<Dialog open={open} onClose={handleClose}>
			<DialogTitle>Search Near By Stations</DialogTitle>
			<DialogContent>
				<form onSubmit={handleSubmit(onSubmit)}>
					<TextField
						{...register("city", {
							required: "City name is required",
							minLength: {
								value: 2,
								message:
									"City name must be at least 2 characters",
							},
						})}
						// label="City Name"
						placeholder="Enter City Name"
						fullWidth
						margin="normal"
						error={!!errors.city}
						helperText={errors.city?.message}
					/>
					<DialogActions>
						<Button
							onClick={handleClose}
							color="#454545"
							fontSize={"16px"}
						>
							Cancel
						</Button>
						<Button
							type="submit"
							sx={{
								backgroundColor: "#000000",
								color: "#D0E1E9",
								borderRadius: "8px",
								fontSize: "16px",
								width: "140px",
								"&:hover": { backgroundColor: "#454545" },
							}}
						>
							Search Station
						</Button>
					</DialogActions>
				</form>
			</DialogContent>
		</Dialog>
	);
};

export default AddStationLocationModal;
