// packages/block-editor/src/components/font-sizes/with-font-sizes.js
import { createHigherOrderComponent, compose } from "@wordpress/compose";
import { Component } from "@wordpress/element";
import { getFontSize, getFontSizeClass } from "./utils";
import { useSettings } from "../use-settings";
import { jsx } from "react/jsx-runtime";
var DEFAULT_FONT_SIZES = [];
var upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join("");
var with_font_sizes_default = (...fontSizeNames) => {
  const fontSizeAttributeNames = fontSizeNames.reduce(
    (fontSizeAttributeNamesAccumulator, fontSizeAttributeName) => {
      fontSizeAttributeNamesAccumulator[fontSizeAttributeName] = `custom${upperFirst(fontSizeAttributeName)}`;
      return fontSizeAttributeNamesAccumulator;
    },
    {}
  );
  return createHigherOrderComponent(
    compose([
      createHigherOrderComponent(
        (WrappedComponent) => (props) => {
          const [fontSizes] = useSettings("typography.fontSizes");
          return /* @__PURE__ */ jsx(
            WrappedComponent,
            {
              ...props,
              fontSizes: fontSizes || DEFAULT_FONT_SIZES
            }
          );
        },
        "withFontSizes"
      ),
      (WrappedComponent) => {
        return class extends Component {
          constructor(props) {
            super(props);
            this.setters = this.createSetters();
            this.state = {};
          }
          createSetters() {
            return Object.entries(fontSizeAttributeNames).reduce(
              (settersAccumulator, [
                fontSizeAttributeName,
                customFontSizeAttributeName
              ]) => {
                const upperFirstFontSizeAttributeName = upperFirst(fontSizeAttributeName);
                settersAccumulator[`set${upperFirstFontSizeAttributeName}`] = this.createSetFontSize(
                  fontSizeAttributeName,
                  customFontSizeAttributeName
                );
                return settersAccumulator;
              },
              {}
            );
          }
          createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName) {
            return (fontSizeValue) => {
              const fontSizeObject = this.props.fontSizes?.find(
                ({ size }) => size === Number(fontSizeValue)
              );
              this.props.setAttributes({
                [fontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? fontSizeObject.slug : void 0,
                [customFontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? void 0 : fontSizeValue
              });
            };
          }
          static getDerivedStateFromProps({ attributes, fontSizes }, previousState) {
            const didAttributesChange = (customFontSizeAttributeName, fontSizeAttributeName) => {
              if (previousState[fontSizeAttributeName]) {
                if (attributes[fontSizeAttributeName]) {
                  return attributes[fontSizeAttributeName] !== previousState[fontSizeAttributeName].slug;
                }
                return previousState[fontSizeAttributeName].size !== attributes[customFontSizeAttributeName];
              }
              return true;
            };
            if (!Object.values(fontSizeAttributeNames).some(
              didAttributesChange
            )) {
              return null;
            }
            const newState = Object.entries(
              fontSizeAttributeNames
            ).filter(
              ([key, value]) => didAttributesChange(value, key)
            ).reduce(
              (newStateAccumulator, [
                fontSizeAttributeName,
                customFontSizeAttributeName
              ]) => {
                const fontSizeAttributeValue = attributes[fontSizeAttributeName];
                const fontSizeObject = getFontSize(
                  fontSizes,
                  fontSizeAttributeValue,
                  attributes[customFontSizeAttributeName]
                );
                newStateAccumulator[fontSizeAttributeName] = {
                  ...fontSizeObject,
                  class: getFontSizeClass(
                    fontSizeAttributeValue
                  )
                };
                return newStateAccumulator;
              },
              {}
            );
            return {
              ...previousState,
              ...newState
            };
          }
          render() {
            return /* @__PURE__ */ jsx(
              WrappedComponent,
              {
                ...{
                  ...this.props,
                  fontSizes: void 0,
                  ...this.state,
                  ...this.setters
                }
              }
            );
          }
        };
      }
    ]),
    "withFontSizes"
  );
};
export {
  with_font_sizes_default as default
};
//# sourceMappingURL=with-font-sizes.js.map
