"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);

// packages/block-editor/src/components/global-styles/filters-panel.js
var filters_panel_exports = {};
__export(filters_panel_exports, {
  default: () => FiltersPanel,
  useHasFiltersPanel: () => useHasFiltersPanel
});
module.exports = __toCommonJS(filters_panel_exports);
var import_clsx = __toESM(require("clsx"));
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_icons = require("@wordpress/icons");
var import_global_styles_engine = require("@wordpress/global-styles-engine");
var import_utils = require("./utils");
var import_object = require("../../utils/object");
var import_jsx_runtime = require("react/jsx-runtime");
var EMPTY_ARRAY = [];
function useMultiOriginColorPresets(settings, { presetSetting, defaultSetting }) {
  const disableDefault = !settings?.color?.[defaultSetting];
  const userPresets = settings?.color?.[presetSetting]?.custom || EMPTY_ARRAY;
  const themePresets = settings?.color?.[presetSetting]?.theme || EMPTY_ARRAY;
  const defaultPresets = settings?.color?.[presetSetting]?.default || EMPTY_ARRAY;
  return (0, import_element.useMemo)(
    () => [
      ...userPresets,
      ...themePresets,
      ...disableDefault ? EMPTY_ARRAY : defaultPresets
    ],
    [disableDefault, userPresets, themePresets, defaultPresets]
  );
}
function useHasFiltersPanel(settings) {
  return useHasDuotoneControl(settings);
}
function useHasDuotoneControl(settings) {
  return settings.color.customDuotone || settings.color.defaultDuotone || settings.color.duotone.length > 0;
}
function FiltersToolsPanel({
  resetAllFilter,
  onChange,
  value,
  panelId,
  children
}) {
  const dropdownMenuProps = (0, import_utils.useToolsPanelDropdownMenuProps)();
  const resetAll = () => {
    const updatedValue = resetAllFilter(value);
    onChange(updatedValue);
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.__experimentalToolsPanel,
    {
      label: (0, import_i18n._x)("Filters", "Name for applying graphical effects"),
      resetAll,
      panelId,
      dropdownMenuProps,
      children
    }
  );
}
var DEFAULT_CONTROLS = {
  duotone: true
};
var popoverProps = {
  placement: "left-start",
  offset: 36,
  shift: true,
  className: "block-editor-duotone-control__popover",
  headerTitle: (0, import_i18n.__)("Duotone")
};
var LabeledColorIndicator = ({ indicator, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalZStack, { isLayered: false, offset: -8, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Flex, { expanded: false, children: indicator === "unset" || !indicator ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ColorIndicator, { className: "block-editor-duotone-control__unset-indicator" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.DuotoneSwatch, { values: indicator }) }) }),
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { title: label, children: label })
] });
var renderToggle = (duotone, resetDuotone) => ({ onToggle, isOpen }) => {
  const duotoneButtonRef = (0, import_element.useRef)(void 0);
  const toggleProps = {
    onClick: onToggle,
    className: (0, import_clsx.default)(
      "block-editor-global-styles-filters-panel__dropdown-toggle",
      { "is-open": isOpen }
    ),
    "aria-expanded": isOpen,
    ref: duotoneButtonRef
  };
  const removeButtonProps = {
    onClick: () => {
      if (isOpen) {
        onToggle();
      }
      resetDuotone();
      duotoneButtonRef.current?.focus();
    },
    className: "block-editor-panel-duotone-settings__reset",
    label: (0, import_i18n.__)("Reset")
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { __next40pxDefaultSize: true, ...toggleProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      LabeledColorIndicator,
      {
        indicator: duotone,
        label: (0, import_i18n.__)("Duotone")
      }
    ) }),
    duotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.Button,
      {
        size: "small",
        icon: import_icons.reset,
        ...removeButtonProps
      }
    )
  ] });
};
function FiltersPanel({
  as: Wrapper = FiltersToolsPanel,
  value,
  onChange,
  inheritedValue = value,
  settings,
  panelId,
  defaultControls = DEFAULT_CONTROLS
}) {
  const decodeValue = (rawValue) => (0, import_global_styles_engine.getValueFromVariable)({ settings }, "", rawValue);
  const hasDuotoneEnabled = useHasDuotoneControl(settings);
  const duotonePalette = useMultiOriginColorPresets(settings, {
    presetSetting: "duotone",
    defaultSetting: "defaultDuotone"
  });
  const colorPalette = useMultiOriginColorPresets(settings, {
    presetSetting: "palette",
    defaultSetting: "defaultPalette"
  });
  const duotone = decodeValue(inheritedValue?.filter?.duotone);
  const setDuotone = (newValue) => {
    const duotonePreset = duotonePalette.find(({ colors }) => {
      return colors === newValue;
    });
    const duotoneValue = duotonePreset ? `var:preset|duotone|${duotonePreset.slug}` : newValue;
    onChange(
      (0, import_object.setImmutably)(value, ["filter", "duotone"], duotoneValue)
    );
  };
  const hasDuotone = () => !!value?.filter?.duotone;
  const resetDuotone = () => setDuotone(void 0);
  const resetAllFilter = (0, import_element.useCallback)((previousValue) => {
    return {
      ...previousValue,
      filter: {
        ...previousValue.filter,
        duotone: void 0
      }
    };
  }, []);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    Wrapper,
    {
      resetAllFilter,
      value,
      onChange,
      panelId,
      children: hasDuotoneEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.__experimentalToolsPanelItem,
        {
          label: (0, import_i18n.__)("Duotone"),
          hasValue: hasDuotone,
          onDeselect: resetDuotone,
          isShownByDefault: defaultControls.duotone,
          panelId,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.Dropdown,
            {
              popoverProps,
              className: "block-editor-global-styles-filters-panel__dropdown",
              renderToggle: renderToggle(duotone, resetDuotone),
              renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalDropdownContentWrapper, { paddingSize: "small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.MenuGroup, { label: (0, import_i18n.__)("Duotone"), children: [
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)(
                  "Create a two-tone color effect without losing your original image."
                ) }),
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                  import_components.DuotonePicker,
                  {
                    colorPalette,
                    duotonePalette,
                    disableCustomColors: true,
                    disableCustomDuotone: true,
                    value: duotone,
                    onChange: setDuotone
                  }
                )
              ] }) })
            }
          )
        }
      )
    }
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useHasFiltersPanel
});
//# sourceMappingURL=filters-panel.js.map
