"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var gradients_palette_panel_exports = {};
__export(gradients_palette_panel_exports, {
  default: () => GradientPalettePanel
});
module.exports = __toCommonJS(gradients_palette_panel_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_compose = require("@wordpress/compose");
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_block_editor = require("@wordpress/block-editor");
var import_subtitle = __toESM(require("./subtitle"));
var import_lock_unlock = require("../../lock-unlock");
const { useGlobalSetting } = (0, import_lock_unlock.unlock)(import_block_editor.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, import_compose.useViewportMatch)("small", "<");
  const popoverProps = isMobileViewport ? mobilePopoverProps : void 0;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.__experimentalVStack,
    {
      className: "edit-site-global-styles-gradient-palette-panel",
      spacing: 8,
      children: [
        !!themeGradients && !!themeGradients.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalPaletteEdit,
          {
            canReset: themeGradients !== baseThemeGradients,
            canOnlyChangeValues: true,
            gradients: themeGradients,
            onChange: setThemeGradients,
            paletteLabel: (0, import_i18n.__)("Theme"),
            paletteLabelHeadingLevel: 3,
            popoverProps
          }
        ),
        !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalPaletteEdit,
          {
            canReset: defaultGradients !== baseDefaultGradients,
            canOnlyChangeValues: true,
            gradients: defaultGradients,
            onChange: setDefaultGradients,
            paletteLabel: (0, import_i18n.__)("Default"),
            paletteLabelLevel: 3,
            popoverProps
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalPaletteEdit,
          {
            gradients: customGradients,
            onChange: setCustomGradients,
            paletteLabel: (0, import_i18n.__)("Custom"),
            paletteLabelLevel: 3,
            slugPrefix: "custom-",
            popoverProps
          }
        ),
        !!duotonePalette && !!duotonePalette.length && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.default, { level: 3, children: (0, import_i18n.__)("Duotone") }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { margin: 3 }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.DuotonePicker,
            {
              duotonePalette,
              disableCustomDuotone: true,
              disableCustomColors: true,
              clearable: false,
              onChange: noop
            }
          )
        ] })
      ]
    }
  );
}
//# sourceMappingURL=gradients-palette-panel.js.map
