"use client";

import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import useApiMutation from "@/hooks/use-api";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectLabel,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select"

const formSchema = z.object({
	firstname: z.string().min(2, { message: "Prénom trop court." }),
	lastname: z.string().min(2, { message: "Nom trop court." }),
	role: z.enum(["admin", "user"], { message: "Rôle invalide." }),
	phone: z
		.string()
		.max(10, { message: "Un numéro de téléphone à 10 chiffres." })
		.optional(),
	email: z.string().email({ message: "Email invalide." })
});

export default function CreateMemberForm() {
	const {
		trigger
	} = useApiMutation(
		"/users/new",
		{ onSuccess: () => console.log("Member created") },
		"POST",
		true,
		false
	)

	const form = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
		defaultValues: {
			firstname: "",
			lastname: "",
			role: "user",
			phone: "",
			email: "",
		},
	});

	async function onSubmit(values: z.infer<typeof formSchema>) {
		try {
			const res = await trigger(values)
			if (!res) throw new Error("The server hasn't responded.");
			if (res.status === "Error") throw new Error(res.message);	
		} catch (error) {
			console.error("Form submission error", error);
		}
		console.log("submited");
	}

	return (
		<div className="flex min-h-[60vh] h-full w-full items-center justify-center px-4">
			<Card className="mx-auto max-w-md">
				<CardHeader>
					<CardTitle className="text-2xl">Création de membre</CardTitle>
					<CardDescription>
						Remplissez les différents champs pour créer un membre.
						Un code sera envoyé par mail à l'utilisateur.
						Il pourra ensuite modifier le mot de passe de son compte avec ce code.
					</CardDescription>
				</CardHeader>
				<CardContent>
					<Form {...form}>
						<form
							onSubmit={form.handleSubmit(onSubmit)}
							className="space-y-8"
						>
							<div className="grid gap-4">
								{/* Firstname Field */}
								<FormField
									control={form.control}
									name="firstname"
									render={({ field }) => (
										<FormItem className="grid gap-2">
											<FormLabel htmlFor="name">
												Prénom
											</FormLabel>
											<FormControl>
												<Input
													id="firstname"
													placeholder="John Doe"
													type="text"
													autoComplete="firstname"

													{...field}
												/>
											</FormControl>
											<FormMessage />
										</FormItem>
									)}
								/>
								<div className="grid gap-4">
									{/* Firstname Field */}
									<FormField
										control={form.control}
										name="lastname"
										render={({ field }) => (
											<FormItem className="grid gap-2">
												<FormLabel htmlFor="lastname">
													Nom
												</FormLabel>
												<FormControl>
													<Input
														id="lastname"
														placeholder="John Doe"
														type="text"
														autoComplete="lastname"

														{...field}
													/>
												</FormControl>
												<FormMessage />
											</FormItem>
										)}
									/>

									{/* Email Field */}
									<FormField
										control={form.control}
										name="email"
										render={({ field }) => (
											<FormItem className="grid gap-2">
												<FormLabel htmlFor="email">
													Email
												</FormLabel>
												<FormControl>
													<Input
														id="email"
														placeholder="johndoe@mail.com"
														type="email"
														autoComplete="email"

														{...field}
													/>
												</FormControl>
												<FormMessage />
											</FormItem>
										)}
									/>

									<FormField
										control={form.control}
										name="role"
										render={({ field }) => (
											<FormItem className="grid gap-2">
												<FormLabel htmlFor="role">
													Role
												</FormLabel>
												<FormControl>
													<Select 
														value={field.value}
														onValueChange={(value: string) => field.onChange(value)}>
														<SelectTrigger className="w-[180px]">
															<SelectValue placeholder="Select a role" />
														</SelectTrigger>
														<SelectContent>
															<SelectGroup>
																<SelectLabel>Role</SelectLabel>
																<SelectItem value="admin">Administrateur</SelectItem>
																<SelectItem value="user">Utilisateur</SelectItem>
															</SelectGroup>
														</SelectContent>
													</Select>
												</FormControl>
												<FormMessage />
											</FormItem>
										)}
									/>

									{/* Phone Field */}
									<FormField
										control={form.control}
										name="phone"
										render={({ field }) => (
											<FormItem className="grid gap-2">
												<FormLabel htmlFor="phone">
													Phone number
												</FormLabel>
												<FormControl>
													<Input
														id="phone"
														placeholder="0648265441"
														type="tel"
														autoComplete="phone"

														{...field}
													/>
												</FormControl>
												<FormMessage />
											</FormItem>
										)}
									/>

									<Button type="submit" className="w-full">
										Add member
									</Button>
								</div>
							</div>
						</form>
					</Form>
				</CardContent>
			</Card>
		</div>
	);
}