/* wp:polyfill */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _blocks = require("@wordpress/blocks");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _header = _interopRequireDefault(require("./header"));
var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
var _lockUnlock = require("../../lock-unlock");
var _subtitle = _interopRequireDefault(require("./subtitle"));
var _variationsPanel = require("./variations/variations-panel");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Initial control values.
const BACKGROUND_BLOCK_DEFAULT_VALUES = {
  backgroundSize: 'cover',
  backgroundPosition: '50% 50%' // used only when backgroundSize is 'contain'.
};
function applyFallbackStyle(border) {
  if (!border) {
    return border;
  }
  const hasColorOrWidth = border.color || border.width;
  if (!border.style && hasColorOrWidth) {
    return {
      ...border,
      style: 'solid'
    };
  }
  if (border.style && !hasColorOrWidth) {
    return undefined;
  }
  return border;
}
function applyAllFallbackStyles(border) {
  if (!border) {
    return border;
  }
  if ((0, _components.__experimentalHasSplitBorders)(border)) {
    return {
      top: applyFallbackStyle(border.top),
      right: applyFallbackStyle(border.right),
      bottom: applyFallbackStyle(border.bottom),
      left: applyFallbackStyle(border.left)
    };
  }
  return applyFallbackStyle(border);
}
const {
  useHasDimensionsPanel,
  useHasTypographyPanel,
  useHasBorderPanel,
  useGlobalSetting,
  useSettingsForBlockElement,
  useHasColorPanel,
  useHasFiltersPanel,
  useHasImageSettingsPanel,
  useGlobalStyle,
  useHasBackgroundPanel,
  BackgroundPanel: StylesBackgroundPanel,
  BorderPanel: StylesBorderPanel,
  ColorPanel: StylesColorPanel,
  TypographyPanel: StylesTypographyPanel,
  DimensionsPanel: StylesDimensionsPanel,
  FiltersPanel: StylesFiltersPanel,
  ImageSettingsPanel,
  AdvancedPanel: StylesAdvancedPanel
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ScreenBlock({
  name,
  variation
}) {
  let prefixParts = [];
  if (variation) {
    prefixParts = ['variations', variation].concat(prefixParts);
  }
  const prefix = prefixParts.join('.');
  const [style] = useGlobalStyle(prefix, name, 'user', {
    shouldDecodeEncode: false
  });
  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
    shouldDecodeEncode: false
  });
  const [userSettings] = useGlobalSetting('', name, 'user');
  const [rawSettings, setSettings] = useGlobalSetting('', name);
  const settingsForBlockElement = useSettingsForBlockElement(rawSettings, name);
  const blockType = (0, _blocks.getBlockType)(name);

  // Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
  let disableBlockGap = false;
  if (settingsForBlockElement?.spacing?.blockGap && blockType?.supports?.spacing?.blockGap && (blockType?.supports?.spacing?.__experimentalSkipSerialization === true || blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(spacingType => spacingType === 'blockGap'))) {
    disableBlockGap = true;
  }

  // Only allow `aspectRatio` support if the block is not the grouping block.
  // The grouping block allows the user to use Group, Row and Stack variations,
  // and it is highly likely that the user will not want to set an aspect ratio
  // for all three at once. Until there is the ability to set a different aspect
  // ratio for each variation, we disable the aspect ratio controls for the
  // grouping block in global styles.
  let disableAspectRatio = false;
  if (settingsForBlockElement?.dimensions?.aspectRatio && name === 'core/group') {
    disableAspectRatio = true;
  }
  const settings = (0, _element.useMemo)(() => {
    const updatedSettings = structuredClone(settingsForBlockElement);
    if (disableBlockGap) {
      updatedSettings.spacing.blockGap = false;
    }
    if (disableAspectRatio) {
      updatedSettings.dimensions.aspectRatio = false;
    }
    return updatedSettings;
  }, [settingsForBlockElement, disableBlockGap, disableAspectRatio]);
  const blockVariations = (0, _variationsPanel.useBlockVariations)(name);
  const hasBackgroundPanel = useHasBackgroundPanel(settings);
  const hasTypographyPanel = useHasTypographyPanel(settings);
  const hasColorPanel = useHasColorPanel(settings);
  const hasBorderPanel = useHasBorderPanel(settings);
  const hasDimensionsPanel = useHasDimensionsPanel(settings);
  const hasFiltersPanel = useHasFiltersPanel(settings);
  const hasImageSettingsPanel = useHasImageSettingsPanel(name, userSettings, settings);
  const hasVariationsPanel = !!blockVariations?.length && !variation;
  const {
    canEditCSS
  } = (0, _data.useSelect)(select => {
    const {
      getEntityRecord,
      __experimentalGetCurrentGlobalStylesId
    } = select(_coreData.store);
    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
    return {
      canEditCSS: !!globalStyles?._links?.['wp:action-edit-css']
    };
  }, []);
  const currentBlockStyle = variation ? blockVariations.find(s => s.name === variation) : null;

  // These intermediary objects are needed because the "layout" property is stored
  // in settings rather than styles.
  const inheritedStyleWithLayout = (0, _element.useMemo)(() => {
    return {
      ...inheritedStyle,
      layout: settings.layout
    };
  }, [inheritedStyle, settings.layout]);
  const styleWithLayout = (0, _element.useMemo)(() => {
    return {
      ...style,
      layout: userSettings.layout
    };
  }, [style, userSettings.layout]);
  const onChangeDimensions = newStyle => {
    const updatedStyle = {
      ...newStyle
    };
    delete updatedStyle.layout;
    setStyle(updatedStyle);
    if (newStyle.layout !== userSettings.layout) {
      setSettings({
        ...userSettings,
        layout: newStyle.layout
      });
    }
  };
  const onChangeLightbox = newSetting => {
    // If the newSetting is undefined, this means that the user has deselected
    // (reset) the lightbox setting.
    if (newSetting === undefined) {
      setSettings({
        ...rawSettings,
        lightbox: undefined
      });

      // Otherwise, we simply set the lightbox setting to the new value but
      // taking care of not overriding the other lightbox settings.
    } else {
      setSettings({
        ...rawSettings,
        lightbox: {
          ...rawSettings.lightbox,
          ...newSetting
        }
      });
    }
  };
  const onChangeBorders = newStyle => {
    if (!newStyle?.border) {
      setStyle(newStyle);
      return;
    }

    // As Global Styles can't conditionally generate styles based on if
    // other style properties have been set, we need to force split
    // border definitions for user set global border styles. Border
    // radius is derived from the same property i.e. `border.radius` if
    // it is a string that is used. The longhand border radii styles are
    // only generated if that property is an object.
    //
    // For borders (color, style, and width) those are all properties on
    // the `border` style property. This means if the theme.json defined
    // split borders and the user condenses them into a flat border or
    // vice-versa we'd get both sets of styles which would conflict.
    const {
      radius,
      ...newBorder
    } = newStyle.border;
    const border = applyAllFallbackStyles(newBorder);
    const updatedBorder = !(0, _components.__experimentalHasSplitBorders)(border) ? {
      top: border,
      right: border,
      bottom: border,
      left: border
    } : {
      color: null,
      style: null,
      width: null,
      ...border
    };
    setStyle({
      ...newStyle,
      border: {
        ...updatedBorder,
        radius
      }
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
      title: variation ? currentBlockStyle?.label : blockType.title
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreviewPanel.default, {
      name: name,
      variation: variation
    }), hasVariationsPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-global-styles-screen-variations",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: 3,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
          children: (0, _i18n.__)('Style Variations')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_variationsPanel.VariationsPanel, {
          name: name
        })]
      })
    }), hasColorPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesColorPanel, {
      inheritedValue: inheritedStyle,
      value: style,
      onChange: setStyle,
      settings: settings
    }), hasBackgroundPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesBackgroundPanel, {
      inheritedValue: inheritedStyle,
      value: style,
      onChange: setStyle,
      settings: settings,
      defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES
    }), hasTypographyPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesTypographyPanel, {
      inheritedValue: inheritedStyle,
      value: style,
      onChange: setStyle,
      settings: settings
    }), hasDimensionsPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesDimensionsPanel, {
      inheritedValue: inheritedStyleWithLayout,
      value: styleWithLayout,
      onChange: onChangeDimensions,
      settings: settings,
      includeLayoutControls: true
    }), hasBorderPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesBorderPanel, {
      inheritedValue: inheritedStyle,
      value: style,
      onChange: onChangeBorders,
      settings: settings
    }), hasFiltersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesFiltersPanel, {
      inheritedValue: inheritedStyleWithLayout,
      value: styleWithLayout,
      onChange: setStyle,
      settings: settings,
      includeLayoutControls: true
    }), hasImageSettingsPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageSettingsPanel, {
      onChange: onChangeLightbox,
      value: userSettings,
      inheritedValue: settings
    }), canEditCSS && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
      title: (0, _i18n.__)('Advanced'),
      initialOpen: false,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        children: (0, _i18n.sprintf)(
        // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
        (0, _i18n.__)('Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'), blockType?.title)
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesAdvancedPanel, {
        value: style,
        onChange: setStyle,
        inheritedValue: inheritedStyle
      })]
    })]
  });
}
var _default = exports.default = ScreenBlock;
//# sourceMappingURL=screen-block.js.map