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 { useZodForm } from "~/lib/zodForm";
import Input from "~/components/custom_ui/input";
import { Button } from "~/components/ui/button";
import type { Banners, BannersIdbanner } from "~/schemas/public/Banners";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import { IconMatrixTooltip } from "~/components/IconComponents";
import { Switch } from "~/components/ui/switch";
type FormProps = {
  initialValues: Banners | null;
  submitMutation: (values: Banners) => void;
  del?: (idbanner: BannersIdbanner) => void;
};

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

  let defaultValues: FormValues;

  if (!initialValues) {
    defaultValues = {
      idbanner: "" as BannersIdbanner,
      titolo: "",
      testo: "",
      is_unskippable: false,
      has_cta: false,
      cta_href: "",
      cta_icon: "arrowR",
      cta_text: "",
      color: "",
      is_active: false,
      show_public: true,
      show_private: false,
      hide_duration: 1,
    };
  } 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
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-8 px-0.5"
        >
          <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}
                      onCheckedChange={field.onChange}
                      id="unskippable"
                      className="data-[state=checked]:bg-neutral-700"
                    />
                  </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}
                      onCheckedChange={field.onChange}
                      id="hcta"
                      className="data-[state=checked]:bg-neutral-700"
                    />
                  </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
                    type="number"
                    placeholder=""
                    {...field}
                    id="durata"
                    value={field.value || 1}
                    onChange={(e) => {
                      field.onChange(Number.parseInt(e.target.value));
                    }}
                  />
                </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 htmlFor="cta_icon" className="flex flex-row gap-1">
                    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
                  onValueChange={field.onChange}
                  defaultValue={field.value || ""}
                >
                  <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}
                      onCheckedChange={field.onChange}
                      id="attivo"
                      className="data-[state=checked]:bg-neutral-700"
                    />
                  </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}
                      onCheckedChange={field.onChange}
                      id="pub"
                      className="data-[state=checked]:bg-neutral-700"
                    />
                  </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
                      defaultChecked={field.value}
                      checked={field.value}
                      onCheckedChange={field.onChange}
                      id="priv"
                      className="data-[state=checked]:bg-neutral-700"
                    />
                  </FormControl>
                  <FormMessage />
                </div>
              </FormItem>
            )}
          />

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