"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PanelColorGradientSettingsInner = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _dropdown = _interopRequireDefault(require("./dropdown"));
var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("./use-multiple-origin-colors-and-gradients"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
const PanelColorGradientSettingsInner = ({
  className,
  colors,
  gradients,
  disableCustomColors,
  disableCustomGradients,
  children,
  settings,
  title,
  showTitle = true,
  __experimentalIsRenderedInSidebar,
  enableAlpha
}) => {
  const panelId = (0, _compose.useInstanceId)(PanelColorGradientSettingsInner);
  const {
    batch
  } = (0, _data.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 === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
    className: (0, _clsx.default)('block-editor-panel-color-gradient-settings', className),
    label: showTitle ? title : undefined,
    resetAll: () => {
      batch(() => {
        settings.forEach(({
          colorValue,
          gradientValue,
          onColorChange,
          onGradientChange
        }) => {
          if (colorValue) {
            onColorChange();
          } else if (gradientValue) {
            onGradientChange();
          }
        });
      });
    },
    panelId: panelId,
    __experimentalFirstVisibleItemClass: "first",
    __experimentalLastVisibleItemClass: "last",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
      settings: settings,
      panelId: panelId,
      colors,
      gradients,
      disableCustomColors,
      disableCustomGradients,
      __experimentalIsRenderedInSidebar,
      enableAlpha
    }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
        marginY: 4
      }), " ", children]
    })]
  });
};
exports.PanelColorGradientSettingsInner = PanelColorGradientSettingsInner;
const PanelColorGradientSettingsSelect = props => {
  const colorGradientSettings = (0, _useMultipleOriginColorsAndGradients.default)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PanelColorGradientSettingsInner, {
    ...colorGradientSettings,
    ...props
  });
};
const PanelColorGradientSettings = props => {
  if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PanelColorGradientSettingsInner, {
      ...props
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PanelColorGradientSettingsSelect, {
    ...props
  });
};
var _default = exports.default = PanelColorGradientSettings;
//# sourceMappingURL=panel-color-gradient-settings.js.map