infoalloggi-monorepo/apps/infoalloggi/src/forms/FormStringhe.tsx

import { z } from "zod/v4";
import { Confirm } from "~/components/confirm";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import Input from "~/components/custom_ui/input";
import Tiptap from "~/components/tip-tap/editor";
import { Button } from "~/components/ui/button";
import { useZodForm } from "~/lib/zodForm";
import type {
	TestiEStringhe,
	TestiEStringheStingaId,
} from "~/schemas/public/TestiEStringhe";

type FormProps = {
	initialValues: TestiEStringhe | null;
	submitMutation: (values: TestiEStringhe) => void;
	del?: (stringheId: TestiEStringheStingaId) => void;
};
export const FormStringhe = ({
	initialValues,
	submitMutation,
	del,
}: FormProps) => {
	const Schema = z.object({
		stinga_id: z.string(),
		stringa_value: z.string().nullable(),
	});
	type FormValues = z.infer<typeof Schema>;

	let defaultValues: FormValues;
	// This can come from your database or API.
	if (!initialValues) {
		defaultValues = {
			stinga_id: "",
			stringa_value: null,
		};
	} else {
		defaultValues = {
			stinga_id: initialValues.stinga_id,
			stringa_value: initialValues.stringa_value,
		};
	}

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

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

	function onSubmit(fields: FormValues) {
		const values = {
			stinga_id: fields.stinga_id as TestiEStringheStingaId,
			stringa_value: fields.stringa_value,
		};
		submitMutation(values);
	}
	return (
		<>
			<Form {...form}>
				<form
					className="space-y-8 px-0.5"
					onSubmit={form.handleSubmit(onSubmit)}
				>
					<FormField
						control={form.control}
						name="stinga_id"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="stinga_id">Codice</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input placeholder="" {...field} id="stinga_id" />
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="stringa_value"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="stringa_value">Valore testuale</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Tiptap
										id="stringa_value"
										onChange={field.onChange}
										value={field.value || ""}
									/>
								</FormControl>
							</FormItem>
						)}
					/>

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