import React, { useEffect, useState } from "react";

/**
 * @param {{
 *   open: boolean,
 *   onClose: () => void,
 *   onConfirm: () => void,
 *   removing?: boolean,
 *   pageLabel?: string,
 *   pageNum?: number,
 *   isUnsaved?: boolean,
 * }} props
 */
export default function RemovePageConfirmModal({
  open,
  onClose,
  onConfirm,
  removing = false,
  pageLabel,
  pageNum,
  isUnsaved = false,
}) {
  const [agreed, setAgreed] = useState(false);

  useEffect(() => {
    if (open) {
      setAgreed(false);
    }
  }, [open, pageNum, pageLabel]);

  if (!open) return null;

  const title = pageNum != null ? `Remove page ${pageNum}?` : "Remove page?";
  const target =
    pageLabel ||
    (pageNum != null ? `page ${pageNum}` : "this page");

  return (
    <div
      className="swi-modal-backdrop"
      role="presentation"
      onClick={removing ? undefined : onClose}
    >
      <div
        className="swi-modal swi-remove-page-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="remove-page-modal-title"
        onClick={(event) => event.stopPropagation()}
      >
        <header className="swi-modal__head">
          <h2 id="remove-page-modal-title" className="swi-modal__title">
            {title}
          </h2>
          <button
            type="button"
            className="swi-modal__close"
            aria-label="Close"
            disabled={removing}
            onClick={onClose}
          >
            ×
          </button>
        </header>

        <p className="swi-muted swi-remove-page-modal__intro">
          You are about to remove <strong>{target}</strong> from this document.
          {isUnsaved ? (
            <>
              {" "}
              This page has not been saved yet and will be discarded immediately.
            </>
          ) : (
            <>
              {" "}
              Its text, logos, and images will be permanently deleted.
            </>
          )}
        </p>
        <p className="swi-remove-page-modal__note">
          This action cannot be undone. Click <strong>Cancel</strong> to keep
          editing.
        </p>

        <label className="swi-remove-page-modal__agree">
          <input
            type="checkbox"
            checked={agreed}
            disabled={removing}
            onChange={(event) => setAgreed(event.target.checked)}
          />
          <span>
            I understand this page will be permanently removed and I agree to
            continue.
          </span>
        </label>

        <div className="swi-modal-actions">
          <button
            type="button"
            className="swi-btn swi-btn--ghost"
            disabled={removing}
            onClick={onClose}
          >
            Cancel
          </button>
          <button
            type="button"
            className="swi-btn swi-btn--danger"
            disabled={removing || !agreed}
            onClick={onConfirm}
          >
            {removing ? "Removing…" : "Remove page"}
          </button>
        </div>
      </div>
    </div>
  );
}
