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

import { z } from "zod/v4";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import Input from "~/components/custom_ui/input";
import { IconMatrixTooltip } from "~/components/IconComponents";
import { Button } from "~/components/ui/button";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "~/components/ui/select";
import { Switch } from "~/components/ui/switch";
import { useZodForm } from "~/lib/zodForm";
import type { Banners, BannersIdbanner } from "~/schemas/public/Banners";

type FormProps = {
	initialValues: Banners | null;
	submitMutation: (values: Banners) => void;
	del?: (idbanner: BannersIdbanner) => void;
};

export const FormBanners = ({
	initialValues,
	submitMutation,
	del,
}: FormProps) => {
	const Schema = z.object({
		color: z.string().nullable(),
		cta_href: z.string().nullable(),
		cta_icon: z.string().nullable(),
		cta_text: z.string().nullable(),
		has_cta: z.boolean(),
		hide_duration: z.number().nullable(),
		idbanner: z.custom<BannersIdbanner>(),
		is_active: z.boolean(),
		is_unskippable: z.boolean(),
		show_private: z.boolean(),
		show_public: z.boolean(),
		testo: z.string().nullable(),
		titolo: z.string().nullable(),
	});
	type FormValues = z.infer<typeof Schema>;

	let defaultValues: FormValues;

	if (!initialValues) {
		defaultValues = {
			color: "",
			cta_href: "",
			cta_icon: "arrowR",
			cta_text: "",
			has_cta: false,
			hide_duration: 1,
			idbanner: "" as BannersIdbanner,
			is_active: false,
			is_unskippable: false,
			show_private: false,
			show_public: true,
			testo: "",
			titolo: "",
		};
	} else {
		defaultValues = {
			...initialValues,
		};
	}

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

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

	function onSubmit(fields: FormValues) {
		const values = {
			...fields,
		};
		submitMutation(values);
	}
	const COLORI_OPTIONS = ["blu", "rosso", "verde", "indaco"];

	return (
		<>
			<Form {...form}>
				<form
					className="space-y-8 px-0.5"
					onSubmit={form.handleSubmit(onSubmit)}
				>
					<FormField
						control={form.control}
						name="idbanner"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="idbanner">Codice</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input placeholder="" {...field} id="idbanner" />
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="titolo"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="titolo">Titolo</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										{...field}
										id="titolo"
										value={field.value || ""}
									/>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="testo"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="testo">Testo</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										{...field}
										id="testo"
										value={field.value || ""}
									/>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="is_unskippable"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="unskippable">Non Saltabile</FormLabel>
									<FormControl>
										<Switch
											checked={field.value}
											className="data-[state=checked]:bg-neutral-700"
											id="unskippable"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="has_cta"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="hcta">Ha Link</FormLabel>
									<FormControl>
										<Switch
											checked={field.value}
											className="data-[state=checked]:bg-neutral-700"
											id="hcta"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="hide_duration"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="durata">
										Per quanto il banner stà nascosto
									</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										type="number"
										{...field}
										id="durata"
										onChange={(e) => {
											field.onChange(Number.parseInt(e.target.value));
										}}
										value={field.value || 1}
									/>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="cta_href"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="cta_href">Indirizzo Link</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										{...field}
										id="cta_href"
										value={field.value || ""}
									/>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="cta_icon"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel className="flex flex-row gap-1" htmlFor="cta_icon">
										Icona Link - <IconMatrixTooltip />
									</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										{...field}
										id="cta_icon"
										value={field.value || ""}
									/>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="cta_text"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="cta_text">Testo Link</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										placeholder=""
										{...field}
										id="cta_text"
										value={field.value || ""}
									/>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="color"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="select-color">Colore</FormLabel>
									<FormMessage />
								</div>
								<Select
									defaultValue={field.value || ""}
									onValueChange={field.onChange}
								>
									<FormControl>
										<SelectTrigger>
											<SelectValue placeholder="Select a verified email to display" />
										</SelectTrigger>
									</FormControl>
									<SelectContent id="select-color">
										{COLORI_OPTIONS.map((option) => (
											<SelectItem key={option} value={option}>
												{option}
											</SelectItem>
										))}
									</SelectContent>
								</Select>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="is_active"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="attivo">Attivo</FormLabel>
									<FormControl>
										<Switch
											checked={field.value}
											className="data-[state=checked]:bg-neutral-700"
											id="attivo"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="show_public"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="pub">Mostra nel pubblico</FormLabel>
									<FormControl>
										<Switch
											checked={field.value}
											className="data-[state=checked]:bg-neutral-700"
											id="pub"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="show_private"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="priv">Mostra in area riservata</FormLabel>
									<FormControl>
										<Switch
											checked={field.value}
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="priv"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
							</FormItem>
						)}
					/>

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