/**
 * WordPress dependencies
 */
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';

/**
 * Internal dependencies
 */
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 BlockQuickNavigation from '../block-quick-navigation';
import { useBorderPanelLabel } from '../../hooks/border';
import { unlock } from '../../lock-unlock';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function BlockStylesPanel({
  clientId
}) {
  return /*#__PURE__*/_jsx(PanelBody, {
    title: __('Styles'),
    children: /*#__PURE__*/_jsx(BlockStyles, {
      clientId: clientId
    })
  });
}
const BlockInspector = ({
  showNoBlockSelectedMessage = true
}) => {
  const {
    count,
    selectedBlockName,
    selectedBlockClientId,
    blockType,
    isSectionBlock
  } = useSelect(select => {
    const {
      getSelectedBlockClientId,
      getSelectedBlockCount,
      getBlockName,
      getParentSectionBlock,
      isSectionBlock: _isSectionBlock
    } = unlock(select(blockEditorStore));
    const _selectedBlockClientId = getSelectedBlockClientId();
    const renderedBlockClientId = getParentSectionBlock(_selectedBlockClientId) || getSelectedBlockClientId();
    const _selectedBlockName = renderedBlockClientId && getBlockName(renderedBlockClientId);
    const _blockType = _selectedBlockName && getBlockType(_selectedBlockName);
    return {
      count: getSelectedBlockCount(),
      selectedBlockClientId: renderedBlockClientId,
      selectedBlockName: _selectedBlockName,
      blockType: _blockType,
      isSectionBlock: _isSectionBlock(renderedBlockClientId)
    };
  }, []);
  const availableTabs = useInspectorControlsTabs(blockType?.name);
  const showTabs = availableTabs?.length > 1;

  // The block inspector animation settings will be completely
  // removed in the future to create an API which allows the block
  // inspector to transition between what it
  // displays based on the relationship between the selected block
  // and its parent, and only enable it if the parent is controlling
  // its children blocks.
  const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(blockType);
  const borderPanelLabel = useBorderPanelLabel({
    blockName: selectedBlockName
  });
  if (count > 1 && !isSectionBlock) {
    return /*#__PURE__*/_jsxs("div", {
      className: "block-editor-block-inspector",
      children: [/*#__PURE__*/_jsx(MultiSelectionInspector, {}), showTabs ? /*#__PURE__*/_jsx(InspectorControlsTabs, {
        tabs: availableTabs
      }) : /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(InspectorControls.Slot, {}), /*#__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"
        })]
      })]
    });
  }
  const isSelectedBlockUnregistered = selectedBlockName === getUnregisteredTypeHandlerName();

  /*
   * If the selected block is of an unregistered type, avoid showing it as an actual selection
   * because we want the user to focus on the unregistered block warning, not block settings.
   */
  if (!blockType || !selectedBlockClientId || isSelectedBlockUnregistered) {
    if (showNoBlockSelectedMessage) {
      return /*#__PURE__*/_jsx("span", {
        className: "block-editor-block-inspector__no-blocks",
        children: __('No block selected.')
      });
    }
    return null;
  }
  return /*#__PURE__*/_jsx(BlockInspectorSingleBlockWrapper, {
    animate: blockInspectorAnimationSettings,
    wrapper: children => /*#__PURE__*/_jsx(AnimatedContainer, {
      blockInspectorAnimationSettings: blockInspectorAnimationSettings,
      selectedBlockClientId: selectedBlockClientId,
      children: children
    }),
    children: /*#__PURE__*/_jsx(BlockInspectorSingleBlock, {
      clientId: selectedBlockClientId,
      blockName: blockType.name,
      isSectionBlock: isSectionBlock
    })
  });
};
const BlockInspectorSingleBlockWrapper = ({
  animate,
  wrapper,
  children
}) => {
  return animate ? wrapper(children) : children;
};
const 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: children
  }, selectedBlockClientId);
};
const BlockInspectorSingleBlock = ({
  clientId,
  blockName,
  isSectionBlock
}) => {
  const availableTabs = useInspectorControlsTabs(blockName);
  const showTabs = !isSectionBlock && availableTabs?.length > 1;
  const hasBlockStyles = useSelect(select => {
    const {
      getBlockStyles
    } = select(blocksStore);
    const blockStyles = getBlockStyles(blockName);
    return blockStyles && blockStyles.length > 0;
  }, [blockName]);
  const blockInformation = useBlockDisplayInformation(clientId);
  const borderPanelLabel = useBorderPanelLabel({
    blockName
  });
  const contentClientIds = useSelect(select => {
    // Avoid unnecessary subscription.
    if (!isSectionBlock) {
      return;
    }
    const {
      getClientIdsOfDescendants,
      getBlockName,
      getBlockEditingMode
    } = select(blockEditorStore);
    return getClientIdsOfDescendants(clientId).filter(current => getBlockName(current) !== 'core/list-item' && getBlockEditingMode(current) === 'contentOnly');
  }, [isSectionBlock, clientId]);
  return /*#__PURE__*/_jsxs("div", {
    className: "block-editor-block-inspector",
    children: [/*#__PURE__*/_jsx(BlockCard, {
      ...blockInformation,
      className: blockInformation.isSynced && 'is-synced'
    }), /*#__PURE__*/_jsx(BlockVariationTransforms, {
      blockClientId: clientId
    }), showTabs && /*#__PURE__*/_jsx(InspectorControlsTabs, {
      hasBlockStyles: hasBlockStyles,
      clientId: clientId,
      blockName: blockName,
      tabs: availableTabs
    }), !showTabs && /*#__PURE__*/_jsxs(_Fragment, {
      children: [hasBlockStyles && /*#__PURE__*/_jsx(BlockStylesPanel, {
        clientId: clientId
      }), contentClientIds && contentClientIds?.length > 0 && /*#__PURE__*/_jsx(PanelBody, {
        title: __('Content'),
        children: /*#__PURE__*/_jsx(BlockQuickNavigation, {
          clientIds: contentClientIds
        })
      }), !isSectionBlock && /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(InspectorControls.Slot, {}), /*#__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"
        }), /*#__PURE__*/_jsx(PositionControls, {}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
          group: "bindings"
        }), /*#__PURE__*/_jsx("div", {
          children: /*#__PURE__*/_jsx(AdvancedControls, {})
        })]
      })]
    }), /*#__PURE__*/_jsx(SkipToSelectedBlock, {}, "back")]
  });
};

/**
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
 */
export default BlockInspector;
//# sourceMappingURL=index.js.map