"use strict";

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

/**
 * Internal dependencies
 */

const {
  useGlobalSetting
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const mobilePopoverProps = {
  placement: 'bottom-start',
  offset: 8
};
const noop = () => {};
function GradientPalettePanel({
  name
}) {
  const [themeGradients, setThemeGradients] = useGlobalSetting('color.gradients.theme', name);
  const [baseThemeGradients] = useGlobalSetting('color.gradients.theme', name, 'base');
  const [defaultGradients, setDefaultGradients] = useGlobalSetting('color.gradients.default', name);
  const [baseDefaultGradients] = useGlobalSetting('color.gradients.default', name, 'base');
  const [customGradients, setCustomGradients] = useGlobalSetting('color.gradients.custom', name);
  const [defaultPaletteEnabled] = useGlobalSetting('color.defaultGradients', name);
  const [customDuotone] = useGlobalSetting('color.duotone.custom') || [];
  const [defaultDuotone] = useGlobalSetting('color.duotone.default') || [];
  const [themeDuotone] = useGlobalSetting('color.duotone.theme') || [];
  const [defaultDuotoneEnabled] = useGlobalSetting('color.defaultDuotone');
  const duotonePalette = [...(customDuotone || []), ...(themeDuotone || []), ...(defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [])];
  const isMobileViewport = (0, _compose.useViewportMatch)('small', '<');
  const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    className: "edit-site-global-styles-gradient-palette-panel",
    spacing: 8,
    children: [!!themeGradients && !!themeGradients.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
      canReset: themeGradients !== baseThemeGradients,
      canOnlyChangeValues: true,
      gradients: themeGradients,
      onChange: setThemeGradients,
      paletteLabel: (0, _i18n.__)('Theme'),
      paletteLabelHeadingLevel: 3,
      popoverProps: popoverProps
    }), !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
      canReset: defaultGradients !== baseDefaultGradients,
      canOnlyChangeValues: true,
      gradients: defaultGradients,
      onChange: setDefaultGradients,
      paletteLabel: (0, _i18n.__)('Default'),
      paletteLabelLevel: 3,
      popoverProps: popoverProps
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
      gradients: customGradients,
      onChange: setCustomGradients,
      paletteLabel: (0, _i18n.__)('Custom'),
      paletteLabelLevel: 3,
      slugPrefix: "custom-",
      popoverProps: popoverProps
    }), !!duotonePalette && !!duotonePalette.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
        level: 3,
        children: (0, _i18n.__)('Duotone')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
        margin: 3
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DuotonePicker, {
        duotonePalette: duotonePalette,
        disableCustomDuotone: true,
        disableCustomColors: true,
        clearable: false,
        onChange: noop
      })]
    })]
  });
}
//# sourceMappingURL=gradients-palette-panel.js.map