import { useEffect } from "react";
import { createPortal } from "react-dom";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { useScrollLock } from "../hooks/useScrollLock.ts";

interface ConfirmModalProps {
  message: string;
  confirmLabel?: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export function ConfirmModal(
  { message, confirmLabel, onConfirm, onCancel }: ConfirmModalProps,
) {
  const label = confirmLabel ?? t`Delete`;
  useScrollLock();

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onCancel();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onCancel]);

  return createPortal(
    <div className="modal-backdrop" onClick={onCancel}>
      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
        <p className="confirm-modal-message">{message}</p>
        <div className="confirm-modal-actions">
          <button type="button" className="btn-secondary" onClick={onCancel}>
            <Trans>Cancel</Trans>
          </button>
          <button type="button" className="btn-danger" onClick={onConfirm}>
            {label}
          </button>
        </div>
      </div>
    </div>,
    document.body,
  );
}