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

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _subtitle = _interopRequireDefault(require("./subtitle"));
var _navigationButton = require("./navigation-button");
var _hooks = require("./hooks");
var _colorIndicatorWrapper = _interopRequireDefault(require("./color-indicator-wrapper"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalSetting
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const EMPTY_COLORS = [];
function Palette({
  name
}) {
  const [customColors] = useGlobalSetting('color.palette.custom');
  const [themeColors] = useGlobalSetting('color.palette.theme');
  const [defaultColors] = useGlobalSetting('color.palette.default');
  const [defaultPaletteEnabled] = useGlobalSetting('color.defaultPalette', name);
  const [randomizeThemeColors] = (0, _hooks.useColorRandomizer)();
  const colors = (0, _element.useMemo)(() => [...(customColors || EMPTY_COLORS), ...(themeColors || EMPTY_COLORS), ...(defaultColors && defaultPaletteEnabled ? defaultColors : EMPTY_COLORS)], [customColors, themeColors, defaultColors, defaultPaletteEnabled]);
  const screenPath = !name ? '/colors/palette' : '/blocks/' + encodeURIComponent(name) + '/colors/palette';
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 3,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
      level: 3,
      children: (0, _i18n.__)('Palette')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
      isBordered: true,
      isSeparated: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
        path: screenPath,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          direction: "row",
          children: [colors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalZStack, {
              isLayered: false,
              offset: -8,
              children: colors.slice(0, 5).map(({
                color
              }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicatorWrapper.default, {
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorIndicator, {
                  colorValue: color
                })
              }, `${color}-${index}`))
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
              isBlock: true,
              children: (0, _i18n.__)('Edit palette')
            })]
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
            children: (0, _i18n.__)('Add colors')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
            icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
          })]
        })
      })
    }), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
      __next40pxDefaultSize: true,
      variant: "secondary",
      icon: _icons.shuffle,
      onClick: randomizeThemeColors,
      children: (0, _i18n.__)('Randomize colors')
    })]
  });
}
var _default = exports.default = Palette;
//# sourceMappingURL=palette.js.map