homarr/packages/modals/src/confirm-modal.tsx

import { useCallback, useState } from "react";
import type { ComponentPropsWithoutRef, ReactNode } from "react";
import type { ButtonProps, GroupProps } from "@mantine/core";
import { Box, Button, Group } from "@mantine/core";

import type { stringOrTranslation, TranslationFunction } from "@homarr/translation";
import { translateIfNecessary } from "@homarr/translation";
import { useI18n } from "@homarr/translation/client";

import { createModal } from "./creator";

type MaybePromise<T> = T | Promise<T>;

export interface ConfirmModalProps {
  title: string;
  children: ReactNode;
  onConfirm?: () => MaybePromise<void>;
  onCancel?: () => MaybePromise<void>;
  closeOnConfirm?: boolean;
  closeOnCancel?: boolean;
  cancelProps?: ButtonProps & ComponentPropsWithoutRef<"button">;
  confirmProps?: ButtonProps & ComponentPropsWithoutRef<"button">;
  groupProps?: GroupProps;

  labels?: {
    confirm?: stringOrTranslation;
    cancel?: stringOrTranslation;
  };
}

export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ actions, innerProps }) => {
  const [loading, setLoading] = useState(false);
  const t = useI18n();
  const { children, onConfirm, onCancel, cancelProps, confirmProps, groupProps, labels } = innerProps;

  const closeOnConfirm = innerProps.closeOnConfirm ?? true;
  const closeOnCancel = innerProps.closeOnCancel ?? true;

  const cancelLabel = labels?.cancel ?? ((translate: TranslationFunction) => translate("common.action.cancel"));
  const confirmLabel = labels?.confirm ?? ((translate: TranslationFunction) => translate("common.action.confirm"));

  const handleCancel = useCallback(
    async (event: React.MouseEvent<HTMLButtonElement>) => {
      if (typeof cancelProps?.onClick === "function") {
        cancelProps.onClick(event);
      }

      if (typeof onCancel === "function") {
        await onCancel();
      }

      if (closeOnCancel) {
        actions.closeModal();
      }
    },
    [cancelProps, onCancel, closeOnCancel, actions],
  );

  const handleConfirm = useCallback(
    async (event: React.MouseEvent<HTMLButtonElement>) => {
      setLoading(true);
      try {
        if (typeof confirmProps?.onClick === "function") {
          await confirmProps.onClick(event);
        }

        if (typeof onConfirm === "function") {
          await onConfirm();
        }

        if (closeOnConfirm) {
          actions.closeModal();
        }
      } catch {
        // Keep the modal open. Callers own action-specific error feedback.
      } finally {
        setLoading(false);
      }
    },
    [confirmProps, onConfirm, closeOnConfirm, actions],
  );

  return (
    <>
      {children && <Box mb="md">{children}</Box>}

      <Group justify="flex-end" {...groupProps}>
        <Button variant="default" {...cancelProps} onClick={handleCancel}>
          {cancelProps?.children ?? translateIfNecessary(t, cancelLabel)}
        </Button>

        <Button
          data-autofocus
          {...confirmProps}
          onClick={handleConfirm}
          color={confirmProps?.color ?? "red.9"}
          loading={loading}
        >
          {confirmProps?.children ?? translateIfNecessary(t, confirmLabel)}
        </Button>
      </Group>
    </>
  );
}).withOptions({});