"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ColorPalettePanel;
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _icons = require("@wordpress/icons");
var _lockUnlock = require("../../lock-unlock");
var _variationsColor = _interopRequireDefault(require("./variations/variations-color"));
var _hooks = require("./hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalSetting
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const mobilePopoverProps = {
  placement: 'bottom-start',
  offset: 8
};
function ColorPalettePanel({
  name
}) {
  const [themeColors, setThemeColors] = useGlobalSetting('color.palette.theme', name);
  const [baseThemeColors] = useGlobalSetting('color.palette.theme', name, 'base');
  const [defaultColors, setDefaultColors] = useGlobalSetting('color.palette.default', name);
  const [baseDefaultColors] = useGlobalSetting('color.palette.default', name, 'base');
  const [customColors, setCustomColors] = useGlobalSetting('color.palette.custom', name);
  const [defaultPaletteEnabled] = useGlobalSetting('color.defaultPalette', name);
  const isMobileViewport = (0, _compose.useViewportMatch)('small', '<');
  const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
  const [randomizeThemeColors] = (0, _hooks.useColorRandomizer)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    className: "edit-site-global-styles-color-palette-panel",
    spacing: 8,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: 4,
      children: [!!themeColors && !!themeColors.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
        canReset: themeColors !== baseThemeColors,
        canOnlyChangeValues: true,
        colors: themeColors,
        onChange: setThemeColors,
        paletteLabel: (0, _i18n.__)('Theme'),
        paletteLabelHeadingLevel: 3,
        popoverProps: popoverProps
      }), 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')
      })]
    }), !!defaultColors && !!defaultColors.length && !!defaultPaletteEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
      canReset: defaultColors !== baseDefaultColors,
      canOnlyChangeValues: true,
      colors: defaultColors,
      onChange: setDefaultColors,
      paletteLabel: (0, _i18n.__)('Default'),
      paletteLabelHeadingLevel: 3,
      popoverProps: popoverProps
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
      colors: customColors,
      onChange: setCustomColors,
      paletteLabel: (0, _i18n.__)('Custom'),
      paletteLabelHeadingLevel: 3,
      slugPrefix: "custom-",
      popoverProps: popoverProps
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_variationsColor.default, {
      title: (0, _i18n.__)('Palettes')
    })]
  });
}
//# sourceMappingURL=color-palette-panel.js.map