// packages/block-library/src/post-featured-image/overlay-controls.js
import {
  RangeControl,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import {
  withColors,
  __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
  __experimentalUseGradient as useGradient,
  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
} from "@wordpress/block-editor";
import { compose } from "@wordpress/compose";
import { __ } from "@wordpress/i18n";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var Overlay = ({
  clientId,
  attributes,
  setAttributes,
  overlayColor,
  setOverlayColor
}) => {
  const { dimRatio } = attributes;
  const { gradientValue, setGradient } = useGradient();
  const colorGradientSettings = useMultipleOriginColorsAndGradients();
  if (!colorGradientSettings.hasColorsOrGradients) {
    return null;
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ColorGradientSettingsDropdown,
      {
        __experimentalIsRenderedInSidebar: true,
        settings: [
          {
            colorValue: overlayColor.color,
            gradientValue,
            label: __("Overlay"),
            onColorChange: setOverlayColor,
            onGradientChange: setGradient,
            isShownByDefault: true,
            resetAllFilter: () => ({
              overlayColor: void 0,
              customOverlayColor: void 0,
              gradient: void 0,
              customGradient: void 0
            }),
            clearable: true
          }
        ],
        panelId: clientId,
        ...colorGradientSettings
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        hasValue: () => dimRatio !== void 0,
        label: __("Overlay opacity"),
        onDeselect: () => setAttributes({ dimRatio: 0 }),
        resetAllFilter: () => ({
          dimRatio: 0
        }),
        isShownByDefault: true,
        panelId: clientId,
        children: /* @__PURE__ */ jsx(
          RangeControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Overlay opacity"),
            value: dimRatio,
            onChange: (newDimRatio) => setAttributes({
              dimRatio: newDimRatio
            }),
            min: 0,
            max: 100,
            step: 10,
            required: true,
            __next40pxDefaultSize: true
          }
        )
      }
    )
  ] });
};
var overlay_controls_default = compose([
  withColors({ overlayColor: "background-color" })
])(Overlay);
export {
  overlay_controls_default as default
};
//# sourceMappingURL=overlay-controls.js.map
