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

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = StyleVariationsContainer;
var _coreData = require("@wordpress/core-data");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _previewStyles = _interopRequireDefault(require("./preview-styles"));
var _variation = _interopRequireDefault(require("./variations/variation"));
var _useThemeStyleVariationsByProperty = require("../../hooks/use-theme-style-variations/use-theme-style-variations-by-property");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  GlobalStylesContext
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function StyleVariationsContainer({
  gap = 2
}) {
  const {
    user
  } = (0, _element.useContext)(GlobalStylesContext);
  const userStyles = user?.styles;
  const variations = (0, _data.useSelect)(select => {
    return select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations();
  }, []);

  // Filter out variations that are color or typography variations.
  const fullStyleVariations = variations?.filter(variation => {
    return !(0, _useThemeStyleVariationsByProperty.isVariationWithProperties)(variation, ['color']) && !(0, _useThemeStyleVariationsByProperty.isVariationWithProperties)(variation, ['typography', 'spacing']);
  });
  const themeVariations = (0, _element.useMemo)(() => {
    const withEmptyVariation = [{
      title: (0, _i18n.__)('Default'),
      settings: {},
      styles: {}
    }, ...(fullStyleVariations !== null && fullStyleVariations !== void 0 ? fullStyleVariations : [])];
    return [...withEmptyVariation.map(variation => {
      var _variation$settings;
      const blockStyles = {
        ...variation?.styles?.blocks
      } || {};

      // We need to copy any user custom CSS to the variation to prevent it being lost
      // when switching variations.
      if (userStyles?.blocks) {
        Object.keys(userStyles.blocks).forEach(blockName => {
          // First get any block specific custom CSS from the current user styles and merge with any custom CSS for
          // that block in the variation.
          if (userStyles.blocks[blockName].css) {
            const variationBlockStyles = blockStyles[blockName] || {};
            const customCSS = {
              css: `${blockStyles[blockName]?.css || ''} ${userStyles.blocks[blockName].css.trim() || ''}`
            };
            blockStyles[blockName] = {
              ...variationBlockStyles,
              ...customCSS
            };
          }
        });
      }
      // Now merge any global custom CSS from current user styles with global custom CSS in the variation.
      const css = userStyles?.css || variation.styles?.css ? {
        css: `${variation.styles?.css || ''} ${userStyles?.css || ''}`
      } : {};
      const blocks = Object.keys(blockStyles).length > 0 ? {
        blocks: blockStyles
      } : {};
      const styles = {
        ...variation.styles,
        ...css,
        ...blocks
      };
      return {
        ...variation,
        settings: (_variation$settings = variation.settings) !== null && _variation$settings !== void 0 ? _variation$settings : {},
        styles
      };
    })];
  }, [fullStyleVariations, userStyles?.blocks, userStyles?.css]);
  if (!fullStyleVariations || fullStyleVariations?.length < 1) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalGrid, {
    columns: 2,
    className: "edit-site-global-styles-style-variations-container",
    gap: gap,
    children: themeVariations.map((variation, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_variation.default, {
      variation: variation,
      children: isFocused => /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewStyles.default, {
        label: variation?.title,
        withHoverView: true,
        isFocused: isFocused,
        variation: variation
      })
    }, index))
  });
}
//# sourceMappingURL=style-variations-container.js.map