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

import { z } from "zod";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "~/components/custom_ui/form";
import { customErrorMapWrapper } from "~/hooks/locale";
import { useZodForm } from "~/lib/zodForm";
import Input from "~/components/custom_ui/input";
import { Button } from "~/components/ui/button";
import type { FlagsId } from "~/schemas/public/Flags";
export type initialValues = {
  id: FlagsId;
  value: string;
};
type FormProps = {
  initialValues: initialValues | null;
  submitMutation: (values: initialValues) => void;
  handleRemove: (id: FlagsId) => void;
};
export const FormFlags = ({
  initialValues,
  submitMutation,
  handleRemove,
}: FormProps) => {
  const Schema = z.object({
    id: z.string(),
    value: z.string(),
  });
  type FormValues = z.infer<typeof Schema>;

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

  z.setErrorMap(customErrorMapWrapper("it"));

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

  function onSubmit(fields: FormValues) {
    const values = {
      id: fields.id as FlagsId,
      value: fields.value,
    };
    submitMutation(values);
  }

  return (
    <>
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-8 px-0.5"
        >
          <FormField
            control={form.control}
            name="id"
            render={({ field }) => (
              <FormItem>
                <div className="flex flex-wrap items-center gap-x-2">
                  <FormLabel htmlFor="id">Codice</FormLabel>
                  <FormMessage />
                </div>
                <FormControl>
                  <Input placeholder="" {...field} id="id" />
                </FormControl>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="value"
            render={({ field }) => (
              <FormItem>
                <div className="flex flex-wrap items-center gap-x-2">
                  <FormLabel htmlFor="value">Valore testuale</FormLabel>
                  <FormMessage />
                </div>
                <FormControl>
                  <Input
                    placeholder=""
                    {...field}
                    id="value"
                    value={field.value}
                  />
                </FormControl>
              </FormItem>
            )}
          />
          <div className="flex flex-row items-center justify-between">
            <Button type="submit">Salva</Button>
            {initialValues?.id && handleRemove && (
              <Button
                type="button"
                variant="destructive"
                onClick={() => handleRemove(initialValues.id)}
              >
                Cancella
              </Button>
            )}
          </div>
        </form>
      </Form>
    </>
  );
};