// packages/block-editor/src/components/global-styles/filters-panel.js
import clsx from "clsx";
import {
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem,
  __experimentalHStack as HStack,
  __experimentalZStack as ZStack,
  __experimentalDropdownContentWrapper as DropdownContentWrapper,
  MenuGroup,
  ColorIndicator,
  DuotonePicker,
  DuotoneSwatch,
  Dropdown,
  Flex,
  FlexItem,
  Button
} from "@wordpress/components";
import { __, _x } from "@wordpress/i18n";
import { useCallback, useMemo, useRef } from "@wordpress/element";
import { reset as resetIcon } from "@wordpress/icons";
import { getValueFromVariable } from "@wordpress/global-styles-engine";
import { useToolsPanelDropdownMenuProps } from "./utils";
import { setImmutably } from "../../utils/object";
import { Fragment, jsx, jsxs } from "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 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 = useToolsPanelDropdownMenuProps();
  const resetAll = () => {
    const updatedValue = resetAllFilter(value);
    onChange(updatedValue);
  };
  return /* @__PURE__ */ jsx(
    ToolsPanel,
    {
      label: _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: __("Duotone")
};
var LabeledColorIndicator = ({ indicator, label }) => /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
  /* @__PURE__ */ jsx(ZStack, { isLayered: false, offset: -8, children: /* @__PURE__ */ jsx(Flex, { expanded: false, children: indicator === "unset" || !indicator ? /* @__PURE__ */ jsx(ColorIndicator, { className: "block-editor-duotone-control__unset-indicator" }) : /* @__PURE__ */ jsx(DuotoneSwatch, { values: indicator }) }) }),
  /* @__PURE__ */ jsx(FlexItem, { title: label, children: label })
] });
var renderToggle = (duotone, resetDuotone) => ({ onToggle, isOpen }) => {
  const duotoneButtonRef = useRef(void 0);
  const toggleProps = {
    onClick: onToggle,
    className: clsx(
      "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: __("Reset")
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Button, { __next40pxDefaultSize: true, ...toggleProps, children: /* @__PURE__ */ jsx(
      LabeledColorIndicator,
      {
        indicator: duotone,
        label: __("Duotone")
      }
    ) }),
    duotone && /* @__PURE__ */ jsx(
      Button,
      {
        size: "small",
        icon: resetIcon,
        ...removeButtonProps
      }
    )
  ] });
};
function FiltersPanel({
  as: Wrapper = FiltersToolsPanel,
  value,
  onChange,
  inheritedValue = value,
  settings,
  panelId,
  defaultControls = DEFAULT_CONTROLS
}) {
  const decodeValue = (rawValue) => 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(
      setImmutably(value, ["filter", "duotone"], duotoneValue)
    );
  };
  const hasDuotone = () => !!value?.filter?.duotone;
  const resetDuotone = () => setDuotone(void 0);
  const resetAllFilter = useCallback((previousValue) => {
    return {
      ...previousValue,
      filter: {
        ...previousValue.filter,
        duotone: void 0
      }
    };
  }, []);
  return /* @__PURE__ */ jsx(
    Wrapper,
    {
      resetAllFilter,
      value,
      onChange,
      panelId,
      children: hasDuotoneEnabled && /* @__PURE__ */ jsx(
        ToolsPanelItem,
        {
          label: __("Duotone"),
          hasValue: hasDuotone,
          onDeselect: resetDuotone,
          isShownByDefault: defaultControls.duotone,
          panelId,
          children: /* @__PURE__ */ jsx(
            Dropdown,
            {
              popoverProps,
              className: "block-editor-global-styles-filters-panel__dropdown",
              renderToggle: renderToggle(duotone, resetDuotone),
              renderContent: () => /* @__PURE__ */ jsx(DropdownContentWrapper, { paddingSize: "small", children: /* @__PURE__ */ jsxs(MenuGroup, { label: __("Duotone"), children: [
                /* @__PURE__ */ jsx("p", { children: __(
                  "Create a two-tone color effect without losing your original image."
                ) }),
                /* @__PURE__ */ jsx(
                  DuotonePicker,
                  {
                    colorPalette,
                    duotonePalette,
                    disableCustomColors: true,
                    disableCustomDuotone: true,
                    value: duotone,
                    onChange: setDuotone
                  }
                )
              ] }) })
            }
          )
        }
      )
    }
  );
}
export {
  FiltersPanel as default,
  useHasFiltersPanel
};
//# sourceMappingURL=filters-panel.js.map
