// packages/editor/src/components/sync-connection-modal/index.js
import { useSelect, select } from "@wordpress/data";
import { useCopyToClipboard } from "@wordpress/compose";
import { serialize } from "@wordpress/blocks";
import { store as coreDataStore } from "@wordpress/core-data";
import {
  privateApis,
  store as blockEditorStore
} from "@wordpress/block-editor";
import {
  Button,
  Modal,
  Icon,
  __experimentalHStack as HStack,
  __experimentalVStack as VStack
} from "@wordpress/components";
import { useState, useEffect, useRef } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { error as errorIcon } from "@wordpress/icons";
import { getSyncErrorMessages } from "../../utils/sync-error-messages.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var { BlockCanvasCover } = unlock(privateApis);
var INITIAL_DISCONNECTED_DEBOUNCE_MS = 5e3;
function SyncConnectionModal() {
  const connectionState = useSelect((selectFn) => {
    return selectFn(coreDataStore).getSyncConnectionStatus() || null;
  }, []);
  const copyButtonRef = useCopyToClipboard(() => {
    const blocks = select(blockEditorStore).getBlocks();
    return serialize(blocks);
  });
  const [syncConnectionMessage, setSyncConnectionMessage] = useState(null);
  const debounceTimerRef = useRef(null);
  const hasInitializedRef = useRef(false);
  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(
          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__ */ jsx(BlockCanvasCover.Fill, { children: /* @__PURE__ */ jsx(
    Modal,
    {
      __experimentalHideHeader: true,
      icon: errorIcon,
      isDismissible: false,
      isFullScreen: false,
      onRequestClose: () => {
      },
      shouldCloseOnClickOutside: false,
      shouldCloseOnEsc: false,
      children: /* @__PURE__ */ jsx("div", { className: "editor-sync-connection-modal__container", children: /* @__PURE__ */ jsxs(VStack, { alignment: "center", justify: "center", spacing: 2, children: [
        /* @__PURE__ */ jsx(Icon, { fill: "#ccc", icon: errorIcon, size: 64 }),
        /* @__PURE__ */ jsx("h1", { children: title }),
        /* @__PURE__ */ jsx("p", { className: "editor-sync-connection-modal__description", children: description }),
        /* @__PURE__ */ jsxs(HStack, { spacing: 2, justify: "center", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              ref: copyButtonRef,
              variant: "primary",
              children: __("Copy post content")
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              href: "edit.php",
              isDestructive: true,
              variant: "secondary",
              children: __("Edit another post")
            }
          )
        ] })
      ] }) })
    }
  ) });
}
export {
  SyncConnectionModal
};
//# sourceMappingURL=index.mjs.map
