// packages/block-editor/src/components/block-inspector/index.js
import { __ } from "@wordpress/i18n";
import {
  getBlockType,
  getUnregisteredTypeHandlerName,
  store as blocksStore
} from "@wordpress/blocks";
import { PanelBody, __unstableMotion as motion } from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import EditContents from "./edit-contents";
import SkipToSelectedBlock from "../skip-to-selected-block";
import BlockCard from "../block-card";
import MultiSelectionInspector from "../multi-selection-inspector";
import BlockVariationTransforms from "../block-variation-transforms";
import useBlockDisplayInformation from "../use-block-display-information";
import { store as blockEditorStore } from "../../store";
import BlockStyles from "../block-styles";
import { default as InspectorControls } from "../inspector-controls";
import { default as InspectorControlsTabs } from "../inspector-controls-tabs";
import useInspectorControlsTabs from "../inspector-controls-tabs/use-inspector-controls-tabs";
import AdvancedControls from "../inspector-controls-tabs/advanced-controls-panel";
import PositionControls from "../inspector-controls-tabs/position-controls-panel";
import useBlockInspectorAnimationSettings from "./useBlockInspectorAnimationSettings";
import { useBorderPanelLabel } from "../../hooks/border";
import ContentTab from "../inspector-controls-tabs/content-tab";
import { unlock } from "../../lock-unlock";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function BlockStylesPanel({ clientId }) {
  return /* @__PURE__ */ jsx(PanelBody, { title: __("Styles"), children: /* @__PURE__ */ jsx(BlockStyles, { clientId }) });
}
function StyleInspectorSlots({
  blockName,
  showAdvancedControls = true,
  showPositionControls = true,
  showListControls = false,
  showBindingsControls = true
}) {
  const borderPanelLabel = useBorderPanelLabel({ blockName });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(InspectorControls.Slot, {}),
    showListControls && /* @__PURE__ */ jsx(InspectorControls.Slot, { group: "list" }),
    /* @__PURE__ */ jsx(
      InspectorControls.Slot,
      {
        group: "color",
        label: __("Color"),
        className: "color-block-support-panel__inner-wrapper"
      }
    ),
    /* @__PURE__ */ jsx(
      InspectorControls.Slot,
      {
        group: "background",
        label: __("Background image")
      }
    ),
    /* @__PURE__ */ jsx(
      InspectorControls.Slot,
      {
        group: "typography",
        label: __("Typography")
      }
    ),
    /* @__PURE__ */ jsx(
      InspectorControls.Slot,
      {
        group: "dimensions",
        label: __("Dimensions")
      }
    ),
    /* @__PURE__ */ jsx(InspectorControls.Slot, { group: "border", label: borderPanelLabel }),
    /* @__PURE__ */ jsx(InspectorControls.Slot, { group: "styles" }),
    showPositionControls && /* @__PURE__ */ jsx(PositionControls, {}),
    showBindingsControls && /* @__PURE__ */ jsx(InspectorControls.Slot, { group: "bindings" }),
    showAdvancedControls && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AdvancedControls, {}) })
  ] });
}
function BlockInspector() {
  const {
    selectedBlockCount,
    selectedBlockName,
    selectedBlockClientId,
    blockType,
    isSectionBlock,
    isSectionBlockInSelection,
    hasBlockStyles,
    editedContentOnlySection
  } = useSelect((select) => {
    const {
      getSelectedBlockClientId,
      getSelectedBlockClientIds,
      getSelectedBlockCount,
      getBlockName,
      getParentSectionBlock,
      isSectionBlock: _isSectionBlock,
      getEditedContentOnlySection,
      isWithinEditedContentOnlySection
    } = unlock(select(blockEditorStore));
    const { getBlockStyles } = select(blocksStore);
    const _selectedBlockClientId = getSelectedBlockClientId();
    const isWithinEditedSection = isWithinEditedContentOnlySection(
      _selectedBlockClientId
    );
    const renderedBlockClientId = isWithinEditedSection ? _selectedBlockClientId : getParentSectionBlock(_selectedBlockClientId) || _selectedBlockClientId;
    const _selectedBlockName = renderedBlockClientId && getBlockName(renderedBlockClientId);
    const _blockType = _selectedBlockName && getBlockType(_selectedBlockName);
    const selectedBlockClientIds = getSelectedBlockClientIds();
    const _isSectionBlockInSelection = selectedBlockClientIds.some(
      (id) => _isSectionBlock(id)
    );
    const blockStyles = _selectedBlockName && getBlockStyles(_selectedBlockName);
    const _hasBlockStyles = blockStyles && blockStyles.length > 0;
    return {
      selectedBlockCount: getSelectedBlockCount(),
      selectedBlockClientId: renderedBlockClientId,
      selectedBlockName: _selectedBlockName,
      blockType: _blockType,
      isSectionBlockInSelection: _isSectionBlockInSelection,
      isSectionBlock: _isSectionBlock(renderedBlockClientId),
      hasBlockStyles: _hasBlockStyles,
      editedContentOnlySection: getEditedContentOnlySection()
    };
  }, []);
  const contentClientIds = useSelect(
    (select) => {
      if (!isSectionBlock || !selectedBlockClientId) {
        return [];
      }
      const {
        getClientIdsOfDescendants,
        getBlockName,
        getBlockEditingMode
      } = unlock(select(blockEditorStore));
      const descendants = getClientIdsOfDescendants(
        selectedBlockClientId
      );
      const navigationDescendants = /* @__PURE__ */ new Set();
      descendants.forEach((clientId) => {
        if (getBlockName(clientId) === "core/navigation") {
          const navChildren = getClientIdsOfDescendants(clientId);
          navChildren.forEach(
            (childId) => navigationDescendants.add(childId)
          );
        }
      });
      return descendants.filter((current) => {
        if (navigationDescendants.has(current)) {
          return false;
        }
        return getBlockName(current) !== "core/list-item" && getBlockEditingMode(current) === "contentOnly";
      });
    },
    [isSectionBlock, selectedBlockClientId]
  );
  const availableTabs = useInspectorControlsTabs(
    blockType?.name,
    contentClientIds,
    isSectionBlock,
    hasBlockStyles
  );
  const hasMultipleTabs = availableTabs?.length > 1;
  const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(blockType);
  const hasSelectedBlocks = selectedBlockCount > 1;
  if (hasSelectedBlocks && !isSectionBlockInSelection) {
    return /* @__PURE__ */ jsxs("div", { className: "block-editor-block-inspector", children: [
      /* @__PURE__ */ jsx(MultiSelectionInspector, {}),
      hasMultipleTabs ? /* @__PURE__ */ jsx(InspectorControlsTabs, { tabs: availableTabs }) : /* @__PURE__ */ jsx(
        StyleInspectorSlots,
        {
          blockName: selectedBlockName,
          showAdvancedControls: false,
          showPositionControls: false,
          showBindingsControls: false
        }
      )
    ] });
  }
  if (hasSelectedBlocks && isSectionBlockInSelection) {
    return /* @__PURE__ */ jsx("div", { className: "block-editor-block-inspector", children: /* @__PURE__ */ jsx(MultiSelectionInspector, {}) });
  }
  const isSelectedBlockUnregistered = selectedBlockName === getUnregisteredTypeHandlerName();
  const shouldShowWarning = !blockType || !selectedBlockClientId || isSelectedBlockUnregistered;
  if (shouldShowWarning) {
    return /* @__PURE__ */ jsx("span", { className: "block-editor-block-inspector__no-blocks", children: __("No block selected.") });
  }
  return /* @__PURE__ */ jsx(
    BlockInspectorSingleBlockWrapper,
    {
      animate: blockInspectorAnimationSettings,
      wrapper: (children) => /* @__PURE__ */ jsx(
        AnimatedContainer,
        {
          blockInspectorAnimationSettings,
          selectedBlockClientId,
          children
        }
      ),
      children: /* @__PURE__ */ jsx(
        BlockInspectorSingleBlock,
        {
          clientId: selectedBlockClientId,
          blockName: blockType.name,
          isSectionBlock,
          availableTabs,
          contentClientIds,
          hasBlockStyles,
          editedContentOnlySection
        }
      )
    }
  );
}
var BlockInspectorSingleBlockWrapper = ({ animate, wrapper, children }) => {
  return animate ? wrapper(children) : children;
};
var AnimatedContainer = ({
  blockInspectorAnimationSettings,
  selectedBlockClientId,
  children
}) => {
  const animationOrigin = blockInspectorAnimationSettings && blockInspectorAnimationSettings.enterDirection === "leftToRight" ? -50 : 50;
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      animate: {
        x: 0,
        opacity: 1,
        transition: {
          ease: "easeInOut",
          duration: 0.14
        }
      },
      initial: {
        x: animationOrigin,
        opacity: 0
      },
      children
    },
    selectedBlockClientId
  );
};
var BlockInspectorSingleBlock = ({
  clientId,
  blockName,
  isSectionBlock,
  availableTabs,
  contentClientIds,
  hasBlockStyles,
  editedContentOnlySection
}) => {
  const hasMultipleTabs = availableTabs?.length > 1;
  const hasParentChildBlockCards = window?.__experimentalContentOnlyPatternInsertion && editedContentOnlySection && editedContentOnlySection !== clientId;
  const parentBlockInformation = useBlockDisplayInformation(
    editedContentOnlySection
  );
  const blockInformation = useBlockDisplayInformation(clientId);
  const isBlockSynced = blockInformation.isSynced;
  const shouldShowTabs = !isBlockSynced && hasMultipleTabs;
  return /* @__PURE__ */ jsxs("div", { className: "block-editor-block-inspector", children: [
    hasParentChildBlockCards && /* @__PURE__ */ jsx(
      BlockCard,
      {
        ...parentBlockInformation,
        className: parentBlockInformation.isSynced && "is-synced",
        parentClientId: editedContentOnlySection
      }
    ),
    /* @__PURE__ */ jsx(
      BlockCard,
      {
        ...blockInformation,
        allowParentNavigation: true,
        className: isBlockSynced && "is-synced",
        isChild: hasParentChildBlockCards,
        clientId
      }
    ),
    window?.__experimentalContentOnlyPatternInsertion && /* @__PURE__ */ jsx(EditContents, { clientId }),
    /* @__PURE__ */ jsx(BlockVariationTransforms, { blockClientId: clientId }),
    shouldShowTabs && /* @__PURE__ */ jsx(
      InspectorControlsTabs,
      {
        hasBlockStyles,
        clientId,
        blockName,
        tabs: availableTabs,
        isSectionBlock,
        contentClientIds
      }
    ),
    !shouldShowTabs && /* @__PURE__ */ jsxs(Fragment, { children: [
      hasBlockStyles && /* @__PURE__ */ jsx(BlockStylesPanel, { clientId }),
      /* @__PURE__ */ jsx(
        ContentTab,
        {
          rootClientId: clientId,
          contentClientIds
        }
      ),
      !isSectionBlock && /* @__PURE__ */ jsx(
        StyleInspectorSlots,
        {
          blockName,
          showListControls: true
        }
      )
    ] }),
    /* @__PURE__ */ jsx(SkipToSelectedBlock, {}, "back")
  ] });
};
var block_inspector_default = BlockInspector;
export {
  block_inspector_default as default
};
//# sourceMappingURL=index.js.map
