"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useAtomicComponentConfig = void 0;
var _typeHelpers = require("../theme/utils/type-helpers");
var _useTheme = require("./useTheme");
var _useStyleProps = require("./useStyleProps");
var _utils = require("./utils/utils");
var _useColorScheme = require("./useColorScheme");
var _useResponsiveProp = require("./useResponsiveProp");
var _styleFunctions = require("../theme/src/style-functions");
var _utils2 = require("../theme/utils/utils");
/**
 * Hook to convert an atomic component style config to the appropriate React Native styles
 * @param themeComponentKey Name of the component in theme.components who's config needs to be used
 * @param receivedProps Raw props passed to the component where the hook is being used
 * @param sizeAndVariantProps Custom size and variant configuration to use
 * @param colorScheme Active color scheme of the component
 * @param styleFunctions List of style functions to use for computing the received style props
 * @returns
 */
const useAtomicComponentConfig = (themeComponentKey, receivedProps, sizeAndVariantProps = {
  size: undefined,
  variant: undefined
}, colorScheme = "primary", styleFunctions = _styleFunctions.boxStyleFunctions) => {
  const {
    theme
  } = (0, _useTheme.useTheme)();

  // Check if the themeComponentKey exists in theme.components
  (0, _utils.checkKeyAvailability)(themeComponentKey, theme.components, "theme.components");

  // Get the size and variant for the current screen size
  const sizeForCurrentScreenSize = (0, _useResponsiveProp.useResponsiveProp)(sizeAndVariantProps.size);
  const variantForCurrentScreenSize = (0, _useResponsiveProp.useResponsiveProp)(sizeAndVariantProps.variant);

  // Get the component style config from theme.components
  const componentStyleConfig = theme.components[themeComponentKey];
  const activeSizeAndVariantConfig = {};
  let finalComponentProps = {};
  if (componentStyleConfig.hasOwnProperty("defaults")) {
    const defaultComponentConfig = componentStyleConfig["defaults"];
    if (defaultComponentConfig.hasOwnProperty("size")) {
      activeSizeAndVariantConfig.size = sizeForCurrentScreenSize ? sizeForCurrentScreenSize : defaultComponentConfig.size;
    }
    if (defaultComponentConfig.hasOwnProperty("variant")) {
      activeSizeAndVariantConfig.variant = variantForCurrentScreenSize ? variantForCurrentScreenSize : defaultComponentConfig.variant;
    }

    // Get the component type styles
    const componentTypeStyles = (0, _typeHelpers.getKeys)(activeSizeAndVariantConfig).reduce((style, currProp) => {
      let activeSizeAndVariantStyles;
      if (currProp === "size") {
        (0, _utils.checkKeyAvailability)("sizes", componentStyleConfig, `theme.components['${String(themeComponentKey)}']`);
        (0, _utils.checkKeyAvailability)(activeSizeAndVariantConfig["size"], componentStyleConfig.sizes, `theme.components['${String(themeComponentKey)}']['sizes']`);
        let partConfig = componentStyleConfig.sizes[activeSizeAndVariantConfig[currProp]];
        if (typeof partConfig === "function") partConfig = partConfig(activeSizeAndVariantConfig.variant, colorScheme);
        activeSizeAndVariantStyles = partConfig;
      } else {
        (0, _utils.checkKeyAvailability)("variants", componentStyleConfig, `theme.components['${String(themeComponentKey)}']`);
        (0, _utils.checkKeyAvailability)(activeSizeAndVariantConfig["variant"], componentStyleConfig.variants, `theme.components['${String(themeComponentKey)}']['variants']`);
        let partConfig = componentStyleConfig.variants[activeSizeAndVariantConfig[currProp]];
        if (typeof partConfig === "function") partConfig = partConfig(activeSizeAndVariantConfig.size, colorScheme);
        activeSizeAndVariantStyles = partConfig;
      }
      if (style) {
        return {
          ...style,
          ...(0, _utils2.removeUndefined)(activeSizeAndVariantStyles)
        };
      }
      return activeSizeAndVariantStyles;
    }, null);

    // Merge the component base style with the component type styles
    finalComponentProps = {
      ...(componentStyleConfig["baseStyle"] || {}),
      ...(0, _utils2.removeUndefined)(componentTypeStyles)
    };
  } else {
    finalComponentProps = componentStyleConfig["baseStyle"] || {};
  }

  // Apply the active color scheme to the final component props
  finalComponentProps = (0, _useColorScheme.useColorScheme)(colorScheme, finalComponentProps);

  // Merge the user override props with the final component props
  finalComponentProps = {
    ...finalComponentProps,
    ...(0, _utils2.removeUndefined)(receivedProps),
    style: {
      ...finalComponentProps.style,
      ...(0, _utils2.removeUndefined)(receivedProps.style)
    }
  };

  // Compute the component styles using the useStyleProps hook
  const componentStyles = (0, _useStyleProps.useStyleProps)(finalComponentProps, styleFunctions);
  return componentStyles;
};
exports.useAtomicComponentConfig = useAtomicComponentConfig;
//# sourceMappingURL=useAtomicComponentConfig.js.map