bulk-email/src/components/EditVehicleModal/index.tsx

import React, { useEffect } from "react";
import {
	Box,
	Button,
	Typography,
	Modal,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form";
import { updateVehicle } from "../../redux/slices/VehicleSlice";
import {
	CustomIconButton,
	CustomTextField,
} from "../AddEditUserModel/styled.css.tsx";
interface EditVehicleModalProps {
	open: boolean;
	handleClose: () => void;
	handleUpdate: (
		id: string,
		name: string,
		email: string,
		phone: string,
		registeredAddress: string,
		imageUrl: string
	) => void;
	editRow: any;
}

interface FormData {
	name: string;
	company: string;
	modelName: string;
	chargeType: string;
	imageUrl: string;
}

const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
	open,
	handleClose,
	handleUpdate,
	editRow,
}) => {
	const {
		control,
		handleSubmit,
		formState: { errors },
		setValue,
		reset,
	} = useForm<FormData>({
		defaultValues: {
			name: "",
			company: "",
			modelName: "",
			chargeType: "",
			imageUrl: "",
		},
	});

	// Set values if editRow is provided
	useEffect(() => {
		if (editRow) {
			setValue("name", editRow.name);
			setValue("company", editRow.company);
			setValue("modelName", editRow.modelName);
			setValue("chargeType", editRow.chargeType);
			setValue("imageUrl", editRow.imageUrl);
		} else {
			reset();
		}
	}, [editRow, setValue, reset]);

	const onSubmit = (data: FormData) => {
		if (editRow) {
			handleUpdate(
				editRow.id,
				data.name,
				data.company,
				data.modelName,
				data.chargeType,
				data.imageUrl
			);
        }
		handleClose(); // Close the modal
		reset(); // Reset the form fields
	};

	return (
		<Modal
			open={open}
			onClose={(e, reason) => {
				if (reason === "backdropClick") {
					return;
				}
				handleClose(); // Close modal when clicking cross or cancel
			}}
			aria-labelledby="edit-vehicle-modal"
		>
			<Box
				component="form"
				onSubmit={handleSubmit(onSubmit)}
				sx={{
					position: "absolute",
					top: "50%",
					left: "50%",
					transform: "translate(-50%, -50%)",
					width: 400,
					bgcolor: "background.paper",
					boxShadow: 24,
					p: 3,
					borderRadius: 2,
				}}
			>
				{/* Header */}
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
					}}
				>
					<Typography variant="h6" fontWeight={600}>
						Edit Vehicle
					</Typography>
					<CustomIconButton onClick={handleClose}>
						<CloseIcon />
					</CustomIconButton>
				</Box>

				{/* Horizontal Line */}
				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />

				{/* Input Fields */}
				<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
					{/* First Row - Two Inputs */}
					<Box sx={{ display: "flex", gap: 2 }}>
						<Box
							sx={{
								display: "flex",
								flexDirection: "column",
								width: "100%",
							}}
						>
							<Typography
								variant="body2"
								fontWeight={500}
								mb={0.5}
							>
								Vehicle Name
							</Typography>
							<Controller
								name="name"
								control={control}
								rules={{
										required: "Vehicle Name is required",
										minLength: {
											value: 3,
											message:
												"Minimum 3 characters required",
										},
										maxLength: {
											value: 30,
											message:
												"Maximum 30 characters allowed",
										},
										pattern: {
											value: /^[A-Za-z\s]+$/, // Only letters and spaces are allowed
											message:
												"Vehicle Name must only contain letters and spaces",
										},
									}}
								render={({ field }) => (
									<CustomTextField
										{...field}
										fullWidth
										placeholder="Enter Vehicle Name"
										size="small"
										error={!!errors.name}
										helperText={errors.name?.message}
										
									/>
								)}
							/>
						</Box>

						<Box
							sx={{
								display: "flex",
								flexDirection: "column",
								width: "100%",
							}}
						>
							<Typography
								variant="body2"
								fontWeight={500}
								mb={0.5}
							>
								Company
							</Typography>
							<Controller
								name="company"
								control={control}
								rules={{ required: "Company is required" }}
								render={({ field }) => (
									<CustomTextField
										{...field}
										fullWidth
										placeholder="Enter Company Name"
										size="small"
										error={!!errors.company}
										helperText={errors.company?.message}
									/>
								)}
							/>
						</Box>
					</Box>

					{/* Second Row - Two Inputs */}
					<Box sx={{ display: "flex", gap: 2 }}>
						<Box
							sx={{
								display: "flex",
								flexDirection: "column",
								width: "100%",
							}}
						>
							<Typography
								variant="body2"
								fontWeight={500}
								mb={0.5}
							>
								Model Name
							</Typography>
							<Controller
								name="modelName"
								control={control}
								rules={{ required: "Model Name is required" }}
								render={({ field }) => (
									<CustomTextField
										{...field}
										fullWidth
										placeholder="Enter Model Name"
										size="small"
										error={!!errors.modelName}
										helperText={errors.modelName?.message}
									/>
								)}
							/>
						</Box>

						<Box
							sx={{
								display: "flex",
								flexDirection: "column",
								width: "100%",
							}}
						>
							<Typography
								variant="body2"
								fontWeight={500}
								mb={0.5}
							>
								Charge Type
							</Typography>
							<Controller
								name="chargeType"
								control={control}
								rules={{ required: "Charge Type is required" }}
								render={({ field }) => (
									<CustomTextField
										{...field}
										fullWidth
										placeholder="Enter Charge Type"
										size="small"
										error={!!errors.chargeType}
										helperText={errors.chargeType?.message}
									/>
								)}
							/>
						</Box>
					</Box>

					{/* Third Row - Image URL Input */}
					<Box
						sx={{
							display: "flex",
							flexDirection: "column",
							width: "100%",
						}}
					>
						<Typography variant="body2" fontWeight={500} mb={0.5}>
							Image URL
						</Typography>
						<Controller
							name="imageUrl"
							control={control}
							rules={{ required: "Image URL is required" }}
							render={({ field }) => (
								<CustomTextField
									{...field}
									fullWidth
									placeholder="Enter Image URL"
									size="small"
									error={!!errors.imageUrl}
									helperText={errors.imageUrl?.message}
								/>
							)}
						/>
					</Box>
				</Box>

				{/* Submit Button */}
				<Box
					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
				>
					<Button
						type="submit"
						sx={{
							backgroundColor: "#52ACDF",
							color: "white",
							borderRadius: "8px",
							width: "117px",
							"&:hover": { backgroundColor: "#439BC1" },
						}}
					>
						Update Vehicle
					</Button>
				</Box>
			</Box>
		</Modal>
	);
};

export default EditVehicleModal;