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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import type { Banlist, BanlistId } from "~/schemas/public/Banlist";
import { zBanlistId, zBanType } from "~/server/utils/zod_types";
import BanType from "~/schemas/public/BanType";

type FormProps = {
  initialValues: Banlist | null;
  submitMutation: (values: Banlist) => void;
  del?: (isbanlist: BanlistId) => void;
};

export const FormBanlist = ({
  initialValues,
  submitMutation,
  del,
}: FormProps) => {
  const Schema = z.object({
    id: zBanlistId,
    value: z.string(),
    type: zBanType,
  });
  type FormValues = z.infer<typeof Schema>;

  let defaultValues: FormValues;

  if (!initialValues) {
    defaultValues = {
      id: 0 as BanlistId,
      value: "",
      type: BanType.email,
    };
  } else {
    defaultValues = {
      ...initialValues,
    };
  }

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

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

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

  return (
    <>
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-8 px-0.5"
        >
          <FormField
            control={form.control}
            name="type"
            render={({ field }) => (
              <FormItem>
                <div className="flex flex-wrap items-center gap-x-2">
                  <FormLabel htmlFor="titolo">Tipo</FormLabel>
                  <FormMessage />
                </div>
                <FormControl>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={field.value || ""}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select a verified email to display" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent id="select-color">
                      {Object.values(BanType).map((option) => (
                        <SelectItem key={option} value={option}>
                          {option}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </FormControl>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="value"
            render={({ field }) => (
              <FormItem>
                <div className="flex flex-wrap items-center gap-x-2">
                  <FormLabel htmlFor="testo">Valore</FormLabel>
                  <FormMessage />
                </div>
                <FormControl>
                  <Input
                    placeholder=""
                    {...field}
                    id="testo"
                    value={field.value || ""}
                  />
                </FormControl>
              </FormItem>
            )}
          />

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