import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
import { Button } from "@repo/shadcn-ui/components/button";
import { useTranslation } from "react-i18next";

import { InventoryFeedback } from "../../../shared";
import { useEndRelationshipDialogController } from "../controllers";
import type { EndRelationshipDialogProps } from "../types";

export function EndRelationshipDialog(props: EndRelationshipDialogProps) {
  const { relationship, sourceName, targetName, onClose } = props;
  const { mutation } = useEndRelationshipDialogController(props);
  const { t } = useTranslation("assets");

  return (
    <FormDialog
      cancelLabel={t("cancel")}
      formActions
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      title={t("endRelationship")}
    >
      <FormBody>
        <p className="text-sm">
          {relationship.values.name} · {sourceName} → {targetName}
        </p>
        <p className="text-sm text-muted-foreground">{t("endRelationshipConfirm")}</p>
        <InventoryFeedback error={mutation.error} />
      </FormBody>
      <FormActions>
        <Button
          disabled={mutation.isPending}
          onClick={() => mutation.mutate(undefined, { onSuccess: onClose })}
          type="button"
        >
          {t("endRelationship")}
        </Button>
      </FormActions>
    </FormDialog>
  );
}