// packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
import clsx from "clsx";
import {
  __experimentalSpacer as Spacer,
  __experimentalToolsPanel as ToolsPanel
} from "@wordpress/components";
import { useRegistry } from "@wordpress/data";
import { useInstanceId } from "@wordpress/compose";
import ColorGradientSettingsDropdown from "./dropdown";
import useColorsAndGradientsPalettes from "./use-multiple-origin-colors-and-gradients";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var colorsAndGradientKeys = [
  "colors",
  "disableCustomColors",
  "gradients",
  "disableCustomGradients"
];
var PanelColorGradientSettingsInner = ({
  className,
  colors,
  gradients,
  disableCustomColors,
  disableCustomGradients,
  children,
  settings,
  title,
  showTitle = true,
  __experimentalIsRenderedInSidebar,
  enableAlpha
}) => {
  const panelId = useInstanceId(PanelColorGradientSettingsInner);
  const { batch } = useRegistry();
  if ((!colors || colors.length === 0) && (!gradients || gradients.length === 0) && disableCustomColors && disableCustomGradients && settings?.every(
    (setting) => (!setting.colors || setting.colors.length === 0) && (!setting.gradients || setting.gradients.length === 0) && (setting.disableCustomColors === void 0 || setting.disableCustomColors) && (setting.disableCustomGradients === void 0 || setting.disableCustomGradients)
  )) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    ToolsPanel,
    {
      className: clsx(
        "block-editor-panel-color-gradient-settings",
        className
      ),
      label: showTitle ? title : void 0,
      resetAll: () => {
        batch(() => {
          settings.forEach(
            ({
              colorValue,
              gradientValue,
              onColorChange,
              onGradientChange
            }) => {
              if (colorValue) {
                onColorChange();
              } else if (gradientValue) {
                onGradientChange();
              }
            }
          );
        });
      },
      panelId,
      __experimentalFirstVisibleItemClass: "first",
      __experimentalLastVisibleItemClass: "last",
      children: [
        /* @__PURE__ */ jsx(
          ColorGradientSettingsDropdown,
          {
            settings,
            panelId,
            ...{
              colors,
              gradients,
              disableCustomColors,
              disableCustomGradients,
              __experimentalIsRenderedInSidebar,
              enableAlpha
            }
          }
        ),
        !!children && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(Spacer, { marginY: 4 }),
          " ",
          children
        ] })
      ]
    }
  );
};
var PanelColorGradientSettingsSelect = (props) => {
  const colorGradientSettings = useColorsAndGradientsPalettes();
  return /* @__PURE__ */ jsx(
    PanelColorGradientSettingsInner,
    {
      ...{ ...colorGradientSettings, ...props }
    }
  );
};
var PanelColorGradientSettings = (props) => {
  if (colorsAndGradientKeys.every((key) => props.hasOwnProperty(key))) {
    return /* @__PURE__ */ jsx(PanelColorGradientSettingsInner, { ...props });
  }
  return /* @__PURE__ */ jsx(PanelColorGradientSettingsSelect, { ...props });
};
var panel_color_gradient_settings_default = PanelColorGradientSettings;
export {
  PanelColorGradientSettingsInner,
  panel_color_gradient_settings_default as default
};
//# sourceMappingURL=panel-color-gradient-settings.js.map
