"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useColorRandomizer = useColorRandomizer;
exports.useStylesPreviewColors = useStylesPreviewColors;
exports.useSupportedStyles = useSupportedStyles;
var _colord = require("colord");
var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
var _blocks = require("@wordpress/blocks");
var _blockEditor = require("@wordpress/block-editor");
var _lockUnlock = require("../../lock-unlock");
var _data = require("@wordpress/data");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalSetting,
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);

// Enable colord's a11y plugin.
(0, _colord.extend)([_a11y.default]);
function useColorRandomizer(name) {
  const [themeColors, setThemeColors] = useGlobalSetting('color.palette.theme', name);
  function randomizeColors() {
    /* eslint-disable no-restricted-syntax */
    const randomRotationValue = Math.floor(Math.random() * 225);
    /* eslint-enable no-restricted-syntax */

    const newColors = themeColors.map(colorObject => {
      const {
        color
      } = colorObject;
      const newColor = (0, _colord.colord)(color).rotate(randomRotationValue).toHex();
      return {
        ...colorObject,
        color: newColor
      };
    });
    setThemeColors(newColors);
  }
  return window.__experimentalEnableColorRandomizer ? [randomizeColors] : [];
}
function useStylesPreviewColors() {
  const [textColor = 'black'] = useGlobalStyle('color.text');
  const [backgroundColor = 'white'] = useGlobalStyle('color.background');
  const [headingColor = textColor] = useGlobalStyle('elements.h1.color.text');
  const [linkColor = headingColor] = useGlobalStyle('elements.link.color.text');
  const [buttonBackgroundColor = linkColor] = useGlobalStyle('elements.button.color.background');
  const [coreColors] = useGlobalSetting('color.palette.core');
  const [themeColors] = useGlobalSetting('color.palette.theme');
  const [customColors] = useGlobalSetting('color.palette.custom');
  const paletteColors = (themeColors !== null && themeColors !== void 0 ? themeColors : []).concat(customColors !== null && customColors !== void 0 ? customColors : []).concat(coreColors !== null && coreColors !== void 0 ? coreColors : []);
  const textColorObject = paletteColors.filter(({
    color
  }) => color === textColor);
  const buttonBackgroundColorObject = paletteColors.filter(({
    color
  }) => color === buttonBackgroundColor);
  const highlightedColors = textColorObject.concat(buttonBackgroundColorObject).concat(paletteColors).filter(
  // we exclude these background color because it is already visible in the preview.
  ({
    color
  }) => color !== backgroundColor).slice(0, 2);
  return {
    paletteColors,
    highlightedColors
  };
}
function useSupportedStyles(name, element) {
  const {
    supportedPanels
  } = (0, _data.useSelect)(select => {
    return {
      supportedPanels: (0, _lockUnlock.unlock)(select(_blocks.store)).getSupportedStyles(name, element)
    };
  }, [name, element]);
  return supportedPanels;
}
//# sourceMappingURL=hooks.js.map