"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ColorGradientSettingsDropdown;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _control = _interopRequireDefault(require("./control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// When the `ColorGradientSettingsDropdown` controls are being rendered to a
// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
const WithToolsPanelItem = ({
  setting,
  children,
  panelId,
  ...props
}) => {
  const clearValue = () => {
    if (setting.colorValue) {
      setting.onColorChange();
    } else if (setting.gradientValue) {
      setting.onGradientChange();
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
    hasValue: () => {
      return !!setting.colorValue || !!setting.gradientValue;
    },
    label: setting.label,
    onDeselect: clearValue,
    isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true,
    ...props,
    className: "block-editor-tools-panel-color-gradient-settings__item",
    panelId: panelId
    // Pass resetAllFilter if supplied due to rendering via SlotFill
    // into parent ToolsPanel.
    ,
    resetAllFilter: setting.resetAllFilter,
    children: children
  });
};
const LabeledColorIndicator = ({
  colorValue,
  label
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
  justify: "flex-start",
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorIndicator, {
    className: "block-editor-panel-color-gradient-settings__color-indicator",
    colorValue: colorValue
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
    className: "block-editor-panel-color-gradient-settings__color-name",
    title: label,
    children: label
  })]
});

// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
// or as a `Button` if it isn't e.g. the controls are being rendered in
// a `ToolsPanel`.
const renderToggle = settings => ({
  onToggle,
  isOpen
}) => {
  const {
    colorValue,
    label
  } = settings;
  const toggleProps = {
    onClick: onToggle,
    className: (0, _clsx.default)('block-editor-panel-color-gradient-settings__dropdown', {
      'is-open': isOpen
    }),
    'aria-expanded': isOpen
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
    ...toggleProps,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LabeledColorIndicator, {
      colorValue: colorValue,
      label: label
    })
  });
};

// Renders a collection of color controls as dropdowns. Depending upon the
// context in which these dropdowns are being rendered, they may be wrapped
// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
// a regular `Button`.
//
// For more context see: https://github.com/WordPress/gutenberg/pull/40084
function ColorGradientSettingsDropdown({
  colors,
  disableCustomColors,
  disableCustomGradients,
  enableAlpha,
  gradients,
  settings,
  __experimentalIsRenderedInSidebar,
  ...props
}) {
  let popoverProps;
  if (__experimentalIsRenderedInSidebar) {
    popoverProps = {
      placement: 'left-start',
      offset: 36,
      shift: true
    };
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: settings.map((setting, index) => {
      var _setting$gradientValu;
      const controlProps = {
        clearable: false,
        colorValue: setting.colorValue,
        colors,
        disableCustomColors,
        disableCustomGradients,
        enableAlpha,
        gradientValue: setting.gradientValue,
        gradients,
        label: setting.label,
        onColorChange: setting.onColorChange,
        onGradientChange: setting.onGradientChange,
        showTitle: false,
        __experimentalIsRenderedInSidebar,
        ...setting
      };
      const toggleSettings = {
        colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue,
        label: setting.label
      };
      return setting &&
      /*#__PURE__*/
      // If not in an `ItemGroup` wrap the dropdown in a
      // `ToolsPanelItem`
      (0, _jsxRuntime.jsx)(WithToolsPanelItem, {
        setting: setting,
        ...props,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
          popoverProps: popoverProps,
          className: "block-editor-tools-panel-color-gradient-settings__dropdown",
          renderToggle: renderToggle(toggleSettings),
          renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalDropdownContentWrapper, {
            paddingSize: "none",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "block-editor-panel-color-gradient-settings__dropdown-content",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_control.default, {
                ...controlProps
              })
            })
          })
        })
      }, index);
    })
  });
}
//# sourceMappingURL=dropdown.js.map