import React, { useEffect } from "react";
import {
	Box,
	Button,
	Dialog,
	DialogActions,
	DialogContent,
	DialogTitle,
	TextField,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form";

//By Jaanvi : Edit Model :: 11-feb-25
interface AddUserModalProps {
	open: boolean;
	handleClose: () => void;
	handleCreate: (data: FormData) => void;
	handleUpdate: (
		id: string,
		name: string,
		email: string,
		phone: string,
		password: string
	) => void;
	editRow: any;
}

interface FormData {
	name: string;
	email: string;
	phone: string;
	password: string;
}
const AddUserModal: React.FC<AddUserModalProps> = ({
	open,
	handleClose,
	handleCreate,
	
	editRow,
}) => {
	const {
		control,
		handleSubmit,
		formState: { errors },
		setValue,
		reset,
	} = useForm<FormData>({
		defaultValues: {
			name: "",
			email: "",
			phone: "",
			password: "",
		},
	});

	const onSubmit = (data: FormData) => {
		handleCreate(data);

		handleClose();
		reset();
	};

	return (
		<Dialog
			open={open}
			onClose={handleClose}
			maxWidth="md"
			fullWidth
			PaperProps={{
				component: "form",
				onSubmit: handleSubmit(onSubmit),
			}}
		>
			<DialogTitle
				sx={{
					display: "flex",
					alignItems: "center",
					justifyContent: "space-between",
				}}
			>
				{editRow ? "Edit Admin" : "Add Admin"}
				<Box
					onClick={handleClose}
					sx={{
						cursor: "pointer",
						display: "flex",
						alignItems: "center",
					}}
				>
					<CloseIcon />
				</Box>
			</DialogTitle>

			<DialogContent>
				<Controller
					name="name"
					control={control}
					rules={{
						required: "Admin Name is required",
						minLength: {
							value: 3,
							message: "Minimum 3 characters required",
						},
						maxLength: {
							value: 30,
							message: "Maximum 30 characters allowed",
						},
					}}
					render={({ field }) => (
						<TextField
							{...field}
							autoFocus
							required
							margin="dense"
							label="User Name"
							type="text"
							fullWidth
							variant="standard"
							error={!!errors.name}
							helperText={errors.name?.message}
						/>
					)}
				/>

				<Controller
					name="email"
					control={control}
					rules={{
						required: "Email is required",
						pattern: {
							value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
							message: "Invalid email address",
						},
					}}
					render={({ field }) => (
						<TextField
							{...field}
							required
							margin="dense"
							label="Email"
							type="email"
							fullWidth
							variant="standard"
							error={!!errors.email}
							helperText={errors.email?.message}
						/>
					)}
				/>
				<Controller
					name="password"
					control={control}
					rules={{
						required: "password is required",
					}}
					render={({ field }) => (
						<TextField
							{...field}
							required
							margin="dense"
							label="Password"
							type="password"
							fullWidth
							variant="standard"
							error={!!errors.password}
							helperText={errors.password?.message}
						/>
					)}
				/>
				<Controller
					name="phone"
					control={control}
					rules={{
						required: "Phone number is required",
						pattern: {
							value: /^[0-9]*$/,
							message: "Only numbers are allowed",
						},
						minLength: {
							value: 6,
							message: "Phone number must be exactly 6 digits",
						},
						maxLength: {
							value: 14,
							message: "Phone number must be exactly 14 digits",
						},
					}}
					render={({ field }) => (
						<TextField
							{...field}
							required
							margin="dense"
							label="Phone Number"
							type="tel"
							fullWidth
							variant="standard"
							error={!!errors.phone}
							helperText={errors.phone?.message}
						/>
					)}
				/>
			</DialogContent>

			<DialogActions>
				<Button onClick={handleClose}>Cancel</Button>
				<Button type="submit">Create</Button>
			</DialogActions>
		</Dialog>
	);
};

export default AddUserModal;
