"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.pearl = pearl;
var _react = _interopRequireDefault(require("react"));
var _useAtomicComponentConfig = require("./hooks/useAtomicComponentConfig");
var _styleFunctions = require("./theme/src/style-functions");
var _useStyleProps = require("./hooks/useStyleProps");
var _useMolecularComponentConfig = require("./hooks/useMolecularComponentConfig");
var _moti = require("moti");
var _useMotiWithStyleProps = require("./hooks/useMotiWithStyleProps");
var _useTheme = require("./hooks/useTheme");
var _reactNative = require("react-native");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
/**
 * 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
 */
function pearl(Component, config = {
  componentName: "None",
  type: "basic",
  animatable: true
}, styleFunctions = _styleFunctions.boxStyleFunctions, moleculeConfigOptions = {}) {
  let FinalComponent;
  const isAnimatable = !!config.animatable && config.type !== "molecule";
  if (isAnimatable) {
    const ConvertedClassComponent = class extends _react.default.Component {
      static displayName = `Pearl${Component.name ?? Component.displayName ?? `NoName`}`;
      render() {
        const {
          children,
          ...props
        } = this.props;
        return /*#__PURE__*/_react.default.createElement(Component, _extends({
          ref: props.forwardedRef
        }, props), children);
      }
    };
    FinalComponent = (0, _moti.motify)(ConvertedClassComponent)();
  } else {
    FinalComponent = Component;
  }
  return /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
    children,
    ...rest
  }, ref) => {
    const {
      colorMode
    } = (0, _useTheme.useTheme)();
    let convertedProps;
    if (config.type === "atom") {
      convertedProps = (0, _useAtomicComponentConfig.useAtomicComponentConfig)(config["componentName"], rest, {
        size: rest.size,
        variant: rest.variant
      }, rest.colorScheme, styleFunctions);
      if (config.animatable) convertedProps = (0, _useMotiWithStyleProps.useMotiWithStyleProps)(convertedProps, styleFunctions);
    } else if (config.type === "molecule") {
      convertedProps = (0, _useMolecularComponentConfig.useMolecularComponentConfig)(config["componentName"], rest, {
        size: rest.size,
        variant: rest.variant
      }, rest.colorScheme, styleFunctions, moleculeConfigOptions.partForOverridenStyleProps, moleculeConfigOptions.partForOverridenNativeProps, moleculeConfigOptions.partForOverridenAnimationProps);
    } else {
      convertedProps = (0, _useStyleProps.useStyleProps)(rest, styleFunctions);
      if (config.animatable) {
        convertedProps = (0, _useMotiWithStyleProps.useMotiWithStyleProps)(convertedProps, styleFunctions);
      }
    }
    return /*#__PURE__*/_react.default.createElement(FinalComponent, _extends({}, convertedProps, {
      key: _reactNative.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