function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from "react";
import { useAtomicComponentConfig } from "./hooks/useAtomicComponentConfig";
import { boxStyleFunctions } from "./theme/src/style-functions";
import { useStyleProps } from "./hooks/useStyleProps";
import { useMolecularComponentConfig } from "./hooks/useMolecularComponentConfig";
import { motify } from "moti";
import { useMotiWithStyleProps } from "./hooks/useMotiWithStyleProps";
import { useTheme } from "./hooks/useTheme";
import { Platform } from "react-native";

/**
 * Configuration object that adds metadata to a component that's required by Pearl UI
 */

/**
 * Hook to convert a third-party component to a Pearl component that can be configured using style props, an atomic component configuration or a molecular component configuration.
 * @param Component The base component on which the pearlification has to be applied
 * @param config A configuration object that adds metadata to a component that's required by Pearl UI
 * @param styleFunctions The set of style functions that would define the style props that should be supported by the pearlified component
 * @param moleculeConfigOptions The options for configuring the molecular component
 * @returns
 */
export function pearl(Component, config = {
  componentName: "None",
  type: "basic",
  animatable: true
}, styleFunctions = boxStyleFunctions, moleculeConfigOptions = {}) {
  let FinalComponent;
  const isAnimatable = !!config.animatable && config.type !== "molecule";
  if (isAnimatable) {
    const ConvertedClassComponent = class extends React.Component {
      static displayName = `Pearl${Component.name ?? Component.displayName ?? `NoName`}`;
      render() {
        const {
          children,
          ...props
        } = this.props;
        return /*#__PURE__*/React.createElement(Component, _extends({
          ref: props.forwardedRef
        }, props), children);
      }
    };
    FinalComponent = motify(ConvertedClassComponent)();
  } else {
    FinalComponent = Component;
  }
  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
    children,
    ...rest
  }, ref) => {
    const {
      colorMode
    } = useTheme();
    let convertedProps;
    if (config.type === "atom") {
      convertedProps = useAtomicComponentConfig(config["componentName"], rest, {
        size: rest.size,
        variant: rest.variant
      }, rest.colorScheme, styleFunctions);
      if (config.animatable) convertedProps = useMotiWithStyleProps(convertedProps, styleFunctions);
    } else if (config.type === "molecule") {
      convertedProps = useMolecularComponentConfig(config["componentName"], rest, {
        size: rest.size,
        variant: rest.variant
      }, rest.colorScheme, styleFunctions, moleculeConfigOptions.partForOverridenStyleProps, moleculeConfigOptions.partForOverridenNativeProps, moleculeConfigOptions.partForOverridenAnimationProps);
    } else {
      convertedProps = useStyleProps(rest, styleFunctions);
      if (config.animatable) {
        convertedProps = useMotiWithStyleProps(convertedProps, styleFunctions);
      }
    }
    return /*#__PURE__*/React.createElement(FinalComponent, _extends({}, convertedProps, {
      key: Platform.OS === "web" && ["Text", "Icon", "Box"].includes(config.componentName) ? convertedProps.key ? `${convertedProps.key}-${colorMode}` : `${colorMode}-${Math.random()}` : convertedProps.key,
      transition: convertedProps.transition ?? {
        type: "spring",
        dampingRatio: 1,
        duration: 100
      },
      ref: ref
    }), children);
  }));
}
//# sourceMappingURL=pearl.js.map