import { z } from "zod/v4";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import { Button } from "~/components/ui/button";
import Input from "~/components/ui/input";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "~/components/ui/select";
import { useZodForm } from "~/lib/zodForm";
import type { Banlist, BanlistId } from "~/schemas/public/Banlist";
import BanType from "~/schemas/public/BanType";
import { zBanlistId, zBanType } from "~/server/utils/zod_types";

type FormProps = {
	initialValues: Banlist | null;
	submitMutation: (values: Banlist) => void;
	del?: (isbanlist: BanlistId) => void;
};

export const FormBanlist = ({
	initialValues,
	submitMutation,
	del,
}: FormProps) => {
	const Schema = z.object({
		id: zBanlistId,
		type: zBanType,
		value: z.string(),
	});
	type FormValues = z.infer<typeof Schema>;

	let defaultValues: FormValues;

	if (!initialValues) {
		defaultValues = {
			id: 0 as BanlistId,
			type: BanType.email,
			value: "",
		};
	} else {
		defaultValues = {
			...initialValues,
		};
	}

	z.config(z.locales.it());

	const form = useZodForm(Schema, {
		defaultValues: defaultValues,
	});

	function onSubmit(fields: FormValues) {
		const values = {
			...fields,
		};
		submitMutation(values);
	}

	return (
		<>
			<Form {...form}>
				<form
					className="space-y-8 px-0.5"
					onSubmit={form.handleSubmit(onSubmit)}
				>
					<FormField
						control={form.control}
						name="type"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="titolo">Tipo</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Select
										defaultValue={field.value || ""}
										onValueChange={field.onChange}
									>
										<FormControl>
											<SelectTrigger>
												<SelectValue placeholder="Select a verified email to display" />
											</SelectTrigger>
										</FormControl>
										<SelectContent id="select-color">
											{Object.values(BanType).map((option) => (
												<SelectItem key={option} value={option}>
													{option}
												</SelectItem>
											))}
										</SelectContent>
									</Select>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="value"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="testo">Valore</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										{...field}
										id="testo"
										value={field.value}
									/>
								</FormControl>
							</FormItem>
						)}
					/>

					<div className="flex flex-row items-center justify-between">
						<Button type="submit">Salva</Button>
						{initialValues?.id && del && (
							<Button
								onClick={() => del(initialValues.id)}
								type="button"
								variant="destructive"
							>
								Cancella
							</Button>
						)}
					</div>
				</form>
			</Form>
		</>
	);
};
