// packages/block-editor/src/components/block-visibility/toolbar.js
import { __ } from "@wordpress/i18n";
import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
import { useRef, useEffect } from "@wordpress/element";
import { seen, unseen } from "@wordpress/icons";
import { useSelect, useDispatch } from "@wordpress/data";
import { hasBlockSupport } from "@wordpress/blocks";
import { store as blockEditorStore } from "../../store";
import { cleanEmptyObject } from "../../hooks/utils";
import { Fragment, jsx } from "react/jsx-runtime";
function BlockVisibilityToolbar({ clientIds }) {
  const { blocks, canToggleBlockVisibility } = useSelect(
    (select) => {
      const { getBlockName, getBlocksByClientId } = select(blockEditorStore);
      const _blocks = getBlocksByClientId(clientIds);
      return {
        blocks: _blocks,
        canToggleBlockVisibility: _blocks.every(
          ({ clientId }) => hasBlockSupport(
            getBlockName(clientId),
            "visibility",
            true
          )
        )
      };
    },
    [clientIds]
  );
  const hasHiddenBlock = blocks.some(
    (block) => block.attributes.metadata?.blockVisibility === false
  );
  const hasBlockVisibilityButtonShownRef = useRef(false);
  const { updateBlockAttributes } = useDispatch(blockEditorStore);
  useEffect(() => {
    if (hasHiddenBlock) {
      hasBlockVisibilityButtonShownRef.current = true;
    }
  }, [hasHiddenBlock]);
  if (!hasHiddenBlock && !hasBlockVisibilityButtonShownRef.current) {
    return null;
  }
  const toggleBlockVisibility = () => {
    const attributesByClientId = Object.fromEntries(
      blocks?.map(({ clientId, attributes }) => [
        clientId,
        {
          metadata: cleanEmptyObject({
            ...attributes?.metadata,
            blockVisibility: hasHiddenBlock ? void 0 : false
          })
        }
      ])
    );
    updateBlockAttributes(clientIds, attributesByClientId, {
      uniqueByBlock: true
    });
  };
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ToolbarGroup, { className: "block-editor-block-lock-toolbar", children: /* @__PURE__ */ jsx(
    ToolbarButton,
    {
      disabled: !canToggleBlockVisibility,
      icon: hasHiddenBlock ? unseen : seen,
      label: hasHiddenBlock ? __("Hidden") : __("Visible"),
      onClick: toggleBlockVisibility
    }
  ) }) });
}
export {
  BlockVisibilityToolbar as default
};
//# sourceMappingURL=toolbar.js.map
