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

import {
  type PersonProcessDTO,
  ProcessValuesSchema,
  type UpdateProcessInput,
} from "../../common/processes";

import { processTaskTitle } from "./process-labels";
export function ProcessTaskField({
  index,
  task,
  form,
}: {
  index: number;
  task: PersonProcessDTO["values"]["tasks"][number];
  form: UseFormReturn<UpdateProcessInput>;
}) {
  const { t } = useTranslation("companies");
  const prefix = useId();
  const value = form.watch(`tasks.${index}.status`);
  return (
    <section className="rounded-md border p-3 space-y-3">
      <div className="space-y-2">
        <Label htmlFor={`${prefix}-state`}>{processTaskTitle(task, t)}</Label>
        <SelectWithAction
          id={`${prefix}-state`}
          label={task.title}
          onValueChange={(value) => {
            const parsed = ProcessValuesSchema.shape.tasks.element.shape.status.safeParse(value);
            if (parsed.success) {
              form.setValue(`tasks.${index}.status`, parsed.data);
            }
          }}
          options={["pending", "done", "not_applicable"].map((value) => ({
            value,
            label: t(`processes.${value}`),
          }))}
          placeholder={t("mail.choose")}
          value={value}
        />
      </div>
      <details>
        <summary className="text-sm cursor-pointer">{t("processes.taskNotes")}</summary>
        <div className="mt-2">
          <Label className="sr-only" htmlFor={`${prefix}-notes`}>
            {t("processes.taskNotes")}: {task.title}
          </Label>
          <Textarea
            id={`${prefix}-notes`}
            maxLength={4000}
            rows={2}
            {...form.register(`tasks.${index}.notes`)}
          />
        </div>
      </details>
    </section>
  );
}