import { Label } from "@repo/shadcn-ui/components/label";
import { SelectWithAction } from "@repo/shadcn-ui/components/select-with-action";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";

import {
  TicketChannelSchema,
  type TicketInput,
  TicketPrioritySchema,
  TicketStateSchema,
} from "../../common/tickets";
export function TicketClassificationFields({
  form,
  prefix,
}: {
  form: UseFormReturn<TicketInput>;
  prefix: string;
}) {
  const { t } = useTranslation("companies");
  const values = form.watch();
  const fields = [
    {
      name: "channel",
      category: "channels",
      options: TicketChannelSchema.options,
      onChange: (value: string) => {
        const parsed = TicketChannelSchema.safeParse(value);
        if (parsed.success) {
          form.setValue("channel", parsed.data);
        }
      },
    },
    {
      name: "state",
      category: "states",
      options: TicketStateSchema.options,
      onChange: (value: string) => {
        const parsed = TicketStateSchema.safeParse(value);
        if (parsed.success) {
          form.setValue("state", parsed.data);
        }
      },
    },
    {
      name: "priority",
      category: "priorities",
      options: TicketPrioritySchema.options,
      onChange: (value: string) => {
        const parsed = TicketPrioritySchema.safeParse(value);
        if (parsed.success) {
          form.setValue("priority", parsed.data);
        }
      },
    },
  ] as const;
  return (
    <>
      {fields.map((field) => (
        <div className="space-y-2" key={field.name}>
          <Label htmlFor={`${prefix}-${field.name}`}>{t(`tickets.${field.name}`)}</Label>
          <SelectWithAction
            id={`${prefix}-${field.name}`}
            label={t(`tickets.${field.name}`)}
            onValueChange={field.onChange}
            options={field.options.map((value) => ({
              value,
              label: t(`tickets.${field.category}.${value}`),
            }))}
            placeholder={t("tickets.choose")}
            value={values[field.name]}
          />
        </div>
      ))}
    </>
  );
}