"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/editor/src/components/sync-connection-modal/index.js
var sync_connection_modal_exports = {};
__export(sync_connection_modal_exports, {
  SyncConnectionModal: () => SyncConnectionModal
});
module.exports = __toCommonJS(sync_connection_modal_exports);
var import_data = require("@wordpress/data");
var import_compose = require("@wordpress/compose");
var import_blocks = require("@wordpress/blocks");
var import_core_data = require("@wordpress/core-data");
var import_block_editor = require("@wordpress/block-editor");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_sync_error_messages = require("../../utils/sync-error-messages.cjs");
var import_lock_unlock = require("../../lock-unlock.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var { BlockCanvasCover } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
var INITIAL_DISCONNECTED_DEBOUNCE_MS = 5e3;
function SyncConnectionModal() {
  const connectionState = (0, import_data.useSelect)((selectFn) => {
    return selectFn(import_core_data.store).getSyncConnectionStatus() || null;
  }, []);
  const copyButtonRef = (0, import_compose.useCopyToClipboard)(() => {
    const blocks = (0, import_data.select)(import_block_editor.store).getBlocks();
    return (0, import_blocks.serialize)(blocks);
  });
  const [syncConnectionMessage, setSyncConnectionMessage] = (0, import_element.useState)(null);
  const debounceTimerRef = (0, import_element.useRef)(null);
  const hasInitializedRef = (0, import_element.useRef)(false);
  (0, import_element.useEffect)(() => {
    const status = connectionState?.status;
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
      debounceTimerRef.current = null;
    }
    if (status === "connected") {
      hasInitializedRef.current = true;
      setSyncConnectionMessage(null);
    } else if (status === "disconnected") {
      const showModal = () => {
        hasInitializedRef.current = true;
        setSyncConnectionMessage(
          (0, import_sync_error_messages.getSyncErrorMessages)(connectionState.error ?? {})
        );
      };
      if (hasInitializedRef.current) {
        showModal();
      } else {
        debounceTimerRef.current = setTimeout(
          showModal,
          INITIAL_DISCONNECTED_DEBOUNCE_MS
        );
      }
    }
    return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current);
      }
    };
  }, [connectionState]);
  if (!syncConnectionMessage) {
    return null;
  }
  const { title, description } = syncConnectionMessage;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlockCanvasCover.Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.Modal,
    {
      __experimentalHideHeader: true,
      icon: import_icons.error,
      isDismissible: false,
      isFullScreen: false,
      onRequestClose: () => {
      },
      shouldCloseOnClickOutside: false,
      shouldCloseOnEsc: false,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-sync-connection-modal__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { alignment: "center", justify: "center", spacing: 2, children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { fill: "#ccc", icon: import_icons.error, size: 64 }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: title }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "editor-sync-connection-modal__description", children: description }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, justify: "center", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.Button,
            {
              __next40pxDefaultSize: true,
              ref: copyButtonRef,
              variant: "primary",
              children: (0, import_i18n.__)("Copy post content")
            }
          ),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.Button,
            {
              __next40pxDefaultSize: true,
              href: "edit.php",
              isDestructive: true,
              variant: "secondary",
              children: (0, import_i18n.__)("Edit another post")
            }
          )
        ] })
      ] }) })
    }
  ) });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  SyncConnectionModal
});
//# sourceMappingURL=index.cjs.map
