"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/colors/with-colors.js
var with_colors_exports = {};
__export(with_colors_exports, {
  createCustomColorsHOC: () => createCustomColorsHOC,
  default: () => withColors
});
module.exports = __toCommonJS(with_colors_exports);
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_components = require("@wordpress/components");
var import_utils = require("./utils");
var import_use_settings = require("../use-settings");
var import_lock_unlock = require("../../lock-unlock");
var import_jsx_runtime = require("react/jsx-runtime");
var { kebabCase } = (0, import_lock_unlock.unlock)(import_components.privateApis);
var upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join("");
var withCustomColorPalette = (colorsArray) => (0, import_compose.createHigherOrderComponent)(
  (WrappedComponent) => (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrappedComponent, { ...props, colors: colorsArray }),
  "withCustomColorPalette"
);
var withEditorColorPalette = () => (0, import_compose.createHigherOrderComponent)(
  (WrappedComponent) => (props) => {
    const [userPalette, themePalette, defaultPalette] = (0, import_use_settings.useSettings)(
      "color.palette.custom",
      "color.palette.theme",
      "color.palette.default"
    );
    const allColors = (0, import_element.useMemo)(
      () => [
        ...userPalette || [],
        ...themePalette || [],
        ...defaultPalette || []
      ],
      [userPalette, themePalette, defaultPalette]
    );
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrappedComponent, { ...props, colors: allColors });
  },
  "withEditorColorPalette"
);
function createColorHOC(colorTypes, withColorPalette) {
  const colorMap = colorTypes.reduce((colorObject, colorType) => {
    return {
      ...colorObject,
      ...typeof colorType === "string" ? { [colorType]: kebabCase(colorType) } : colorType
    };
  }, {});
  return (0, import_compose.compose)([
    withColorPalette,
    (WrappedComponent) => {
      return class extends import_element.Component {
        constructor(props) {
          super(props);
          this.setters = this.createSetters();
          this.colorUtils = {
            getMostReadableColor: this.getMostReadableColor.bind(this)
          };
          this.state = {};
        }
        getMostReadableColor(colorValue) {
          const { colors } = this.props;
          return (0, import_utils.getMostReadableColor)(colors, colorValue);
        }
        createSetters() {
          return Object.keys(colorMap).reduce(
            (settersAccumulator, colorAttributeName) => {
              const upperFirstColorAttributeName = upperFirst(colorAttributeName);
              const customColorAttributeName = `custom${upperFirstColorAttributeName}`;
              settersAccumulator[`set${upperFirstColorAttributeName}`] = this.createSetColor(
                colorAttributeName,
                customColorAttributeName
              );
              return settersAccumulator;
            },
            {}
          );
        }
        createSetColor(colorAttributeName, customColorAttributeName) {
          return (colorValue) => {
            const colorObject = (0, import_utils.getColorObjectByColorValue)(
              this.props.colors,
              colorValue
            );
            this.props.setAttributes({
              [colorAttributeName]: colorObject && colorObject.slug ? colorObject.slug : void 0,
              [customColorAttributeName]: colorObject && colorObject.slug ? void 0 : colorValue
            });
          };
        }
        static getDerivedStateFromProps({ attributes, colors }, previousState) {
          return Object.entries(colorMap).reduce(
            (newState, [colorAttributeName, colorContext]) => {
              const colorObject = (0, import_utils.getColorObjectByAttributeValues)(
                colors,
                attributes[colorAttributeName],
                attributes[`custom${upperFirst(
                  colorAttributeName
                )}`]
              );
              const previousColorObject = previousState[colorAttributeName];
              const previousColor = previousColorObject?.color;
              if (previousColor === colorObject.color && previousColorObject) {
                newState[colorAttributeName] = previousColorObject;
              } else {
                newState[colorAttributeName] = {
                  ...colorObject,
                  class: (0, import_utils.getColorClassName)(
                    colorContext,
                    colorObject.slug
                  )
                };
              }
              return newState;
            },
            {}
          );
        }
        render() {
          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            WrappedComponent,
            {
              ...{
                ...this.props,
                colors: void 0,
                ...this.state,
                ...this.setters,
                colorUtils: this.colorUtils
              }
            }
          );
        }
      };
    }
  ]);
}
function createCustomColorsHOC(colorsArray) {
  return (...colorTypes) => {
    const withColorPalette = withCustomColorPalette(colorsArray);
    return (0, import_compose.createHigherOrderComponent)(
      createColorHOC(colorTypes, withColorPalette),
      "withCustomColors"
    );
  };
}
function withColors(...colorTypes) {
  const withColorPalette = withEditorColorPalette();
  return (0, import_compose.createHigherOrderComponent)(
    createColorHOC(colorTypes, withColorPalette),
    "withColors"
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  createCustomColorsHOC
});
//# sourceMappingURL=with-colors.js.map
