import { z } from "zod/v4";
import { ColorPicker } from "~/components/color_picker";
import { Confirm } from "~/components/confirm";
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 { useZodForm } from "~/lib/zodForm";
import {
	type Etichette,
	type EtichetteIdEtichetta,
	etichetteIdEtichetta,
} from "~/schemas/public/Etichette";

type FormProps = {
	initialValues: Etichette | null;
	submitMutation: (values: Etichette) => void;
	del?: (id_etichetta: EtichetteIdEtichetta) => void;
};
export const FormEtichette = ({
	initialValues,
	submitMutation,
	del,
}: FormProps) => {
	const Schema = z.object({
		color_hex: z.string().max(7),
		id_etichetta: etichetteIdEtichetta,
		title: z.string(),
	});
	type FormValues = z.infer<typeof Schema>;

	let defaultValues: FormValues;
	// This can come from your database or API.
	if (!initialValues) {
		defaultValues = {
			color_hex: "",
			id_etichetta: 0 as EtichetteIdEtichetta,
			title: "",
		};
	} else {
		defaultValues = {
			color_hex: initialValues.color_hex,
			id_etichetta: initialValues.id_etichetta,
			title: initialValues.title,
		};
	}

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

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

	function onSubmit(fields: FormValues) {
		const values = {
			color_hex: fields.color_hex,
			id_etichetta: fields.id_etichetta,
			title: fields.title,
		};
		submitMutation(values);
	}
	return (
		<>
			<Form {...form}>
				<form
					className="space-y-8 px-0.5"
					onSubmit={form.handleSubmit(onSubmit)}
				>
					<FormField
						control={form.control}
						name="title"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="value">Titolo</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										{...field}
										id="value"
										value={field.value}
									/>
								</FormControl>
							</FormItem>
						)}
					/>

					<FormField
						control={form.control}
						name="color_hex"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="color_hex">Colore</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<ColorPicker
										id="color_hex"
										onChange={field.onChange}
										value={field.value || "#FFFFFF"}
									/>
								</FormControl>
							</FormItem>
						)}
					/>

					<div className="flex flex-row items-center justify-between">
						<Button type="submit" variant="success">
							Salva
						</Button>
						{initialValues?.id_etichetta && del && (
							<Confirm
								description="Questa azione è irreversibile"
								onConfirm={() => del(initialValues.id_etichetta)}
								title="Cancellare l'etichetta?"
							>
								<Button variant="destructive">Cancella</Button>
							</Confirm>
						)}
					</div>
				</form>
			</Form>
		</>
	);
};