import type { components } from "../api/schema";
import { useUpdateTerm, useDeleteTerm } from "../api/queries";
import { LabelledRecordRow } from "../components/labelled-record-row";

type TermView = components["schemas"]["TermView"];

export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; term: TermView; lang: string }) {
  const update = useUpdateTerm();
  const del = useDeleteTerm();

  return (
    <LabelledRecordRow
      record={{ ...term, external_uri: term.external_uri ?? null }}
      lang={lang}
      deleteConfirmKey="actions.confirmDeleteTerm"
      savePending={update.isPending}
      saveError={update.error}
      onEditOpen={() => update.reset()}
      onSave={(labels, uri, done) =>
        update.mutate({ vocabularyId, termId: term.id, external_uri: uri, labels }, { onSuccess: done })}
      onDelete={() => del.mutateAsync({ vocabularyId, termId: term.id })}
    />
  );
}