"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Variation;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _keycodes = require("@wordpress/keycodes");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _editor = require("@wordpress/editor");
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");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  mergeBaseAndUserConfigs
} = (0, _lockUnlock.unlock)(_editor.privateApis);
const {
  GlobalStylesContext,
  areGlobalStyleConfigsEqual
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function Variation({
  variation,
  children,
  isPill,
  properties,
  showTooltip
}) {
  const [isFocused, setIsFocused] = (0, _element.useState)(false);
  const {
    base,
    user,
    setUserConfig
  } = (0, _element.useContext)(GlobalStylesContext);
  const context = (0, _element.useMemo)(() => {
    let merged = mergeBaseAndUserConfigs(base, variation);
    if (properties) {
      merged = (0, _useThemeStyleVariationsByProperty.filterObjectByProperties)(merged, properties);
    }
    return {
      user: variation,
      base,
      merged,
      setUserConfig: () => {}
    };
  }, [variation, base, properties]);
  const selectVariation = () => setUserConfig(variation);
  const selectOnEnter = event => {
    if (event.keyCode === _keycodes.ENTER) {
      event.preventDefault();
      selectVariation();
    }
  };
  const isActive = (0, _element.useMemo)(() => areGlobalStyleConfigsEqual(user, variation), [user, variation]);
  let label = variation?.title;
  if (variation?.description) {
    label = (0, _i18n.sprintf)(/* translators: 1: variation title. 2: variation description. */
    (0, _i18n._x)('%1$s (%2$s)', 'variation label'), variation?.title, variation?.description);
  }
  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _clsx.default)('edit-site-global-styles-variations_item', {
      'is-active': isActive
    }),
    role: "button",
    onClick: selectVariation,
    onKeyDown: selectOnEnter,
    tabIndex: "0",
    "aria-label": label,
    "aria-current": isActive,
    onFocus: () => setIsFocused(true),
    onBlur: () => setIsFocused(false),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _clsx.default)('edit-site-global-styles-variations_item-preview', {
        'is-pill': isPill
      }),
      children: children(isFocused)
    })
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesContext.Provider, {
    value: context,
    children: showTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
      text: variation?.title,
      children: content
    }) : content
  });
}
//# sourceMappingURL=variation.js.map