/* wp:polyfill */
/**
 * External dependencies
 */
import { colord, extend } from 'colord';
import a11yPlugin from 'colord/plugins/a11y';

/**
 * WordPress dependencies
 */
import { store as blocksStore } from '@wordpress/blocks';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import { unlock } from '../../lock-unlock';
import { useSelect } from '@wordpress/data';
const {
  useGlobalSetting,
  useGlobalStyle
} = unlock(blockEditorPrivateApis);

// Enable colord's a11y plugin.
extend([a11yPlugin]);
export 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 = colord(color).rotate(randomRotationValue).toHex();
      return {
        ...colorObject,
        color: newColor
      };
    });
    setThemeColors(newColors);
  }
  return window.__experimentalEnableColorRandomizer ? [randomizeColors] : [];
}
export 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
  };
}
export function useSupportedStyles(name, element) {
  const {
    supportedPanels
  } = useSelect(select => {
    return {
      supportedPanels: unlock(select(blocksStore)).getSupportedStyles(name, element)
    };
  }, [name, element]);
  return supportedPanels;
}
//# sourceMappingURL=hooks.js.map