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 {
  Etichette,
  EtichetteIdEtichetta,
} from "~/schemas/public/Etichette";
import { zEtichettaId } from "~/server/utils/zod_types";
import { ColorPicker } from "~/components/color_picker";
import { Confirm } from "~/components/confirm";
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({
    id_etichetta: zEtichettaId,
    title: z.string(),
    color_hex: z.string().max(7),
  });
  type FormValues = z.infer<typeof Schema>;

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

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

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

  function onSubmit(fields: FormValues) {
    const values = {
      id_etichetta: fields.id_etichetta,
      title: fields.title,
      color_hex: fields.color_hex,
    };
    submitMutation(values);
  }
  return (
    <>
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-8 px-0.5"
        >
          <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"
                    value={field.value || "#FFFFFF"}
                    onChange={field.onChange}
                  />
                </FormControl>
              </FormItem>
            )}
          />

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