"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.usePropsResolution = usePropsResolution;
exports.usePropsResolutionWithComponentTheme = void 0;

var _useNativeBase = require("../useNativeBase");

var _tools = require("../../theme/tools");

var _useBreakpointResolvedProps = require("../useBreakpointResolvedProps");

var _useResponsiveSSRProps = require("../useResponsiveSSRProps");

var _NativeBaseContext = require("../../core/NativeBaseContext");

var _ResolvedStyleMap = require("../../core/ResolvedStyleMap");

var _propsFlattener = require("./propsFlattener");

var _colorMode = require("../../core/color-mode");

var _lodash = _interopRequireDefault(require("lodash.get"));

var _reactNative = require("react-native");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// const getThemeProps = resolvedMap.theme.getThemeProps;

/**
 * @summary Combines provided porps with component's theme props and resloves them.
 * @arg {string} component - Name of the component.
 * @arg {object} incomingProps - Props passed by the user.
 * @arg {object} state - dependent states.
 * @arg {object} config - configuration for resolution. Accepts key like ignoreProps, resolveResponsively.
 * @returns {object} Resolved and flattened props.
 */
function usePropsResolution(component, {
  INTERNAL_themeStyle,
  ...incomingProps
}, state, config) {
  const {
    theme
  } = (0, _useNativeBase.useNativeBase)();
  const {
    colorMode
  } = (0, _colorMode.useColorMode)();
  const componentThemeProps = (0, _ResolvedStyleMap.getThemeProps)(component, {
    colorMode: colorMode,
    platform: _reactNative.Platform.OS
  }, state, incomingProps);

  if (component === 'Button' || component === 'Stack') {
    console.log(componentThemeProps, component, 'theme props');
  }

  if (config !== null && config !== void 0 && config.extendTheme) {
    config.extendTheme.forEach(extendedComponent => {
      const extendedThemeProps = (0, _ResolvedStyleMap.getThemeProps)(extendedComponent, {
        colorMode,
        platform: _reactNative.Platform.OS
      }, state, incomingProps); // if (component === 'TextArea') {
      //   console.log(
      //     extendedThemeProps.styleFromProps,
      //     'extended theme props 11'
      //   );
      // }

      componentThemeProps.style = [...componentThemeProps.style, ...extendedThemeProps.style];
      componentThemeProps.styleFromProps = { ...componentThemeProps.styleFromProps,
        ...extendedThemeProps.styleFromProps
      };
      componentThemeProps.unResolvedProps = { ...componentThemeProps.unResolvedProps,
        ...extendedThemeProps.unResolvedProps
      };
    });
  }

  const componentTheme = (0, _lodash.default)(theme, "components.".concat(component));
  let resolvedProps = usePropsResolutionWithComponentTheme(componentTheme, { ...(componentThemeProps === null || componentThemeProps === void 0 ? void 0 : componentThemeProps.unResolvedProps),
    ...incomingProps
  }, theme, state, { ...config,
    name: component
  }); // if (component === 'SliderThumb') {
  //   console.log(componentThemeProps, state, 'componentThemeProps');
  // }
  // if (component === 'IconButton') {
  //   console.log(
  //     resolvedProps._icon,
  //     // pseudoComponentThemeProps.restDefaultProps.size,
  //     // resolvedProps[property].size,
  //     // {
  //     //   ...pseudoComponentThemeProps.restDefaultProps,
  //     //   ...resolvedProps[property],
  //     // }.size,
  //     'hello here 11'
  //   );
  // }
  // console.log(
  //   { ...componentThemeProps?.unResolvedProps, ...incomingProps },
  //   'component thme props 2222'
  // );
  // Not Resolve theme props and pseudo props
  // if (incomingProps?.INTERNAL_notResolveThemeAndPseudoProps) {
  //   delete incomingProps.INTERNAL_notResolveThemeAndPseudoProps;
  //   return incomingProps;
  // }
  // if (process.env.NODE_ENV === "development" && incomingProps.debug) {
  //   /* eslint-disable-next-line */
  //   console.log(
  //     "%c resolvedProps: ",
  //     "color: #22d3ee; font-weight: 700;",
  //     resolvedProps
  //   );
  // }
  // console.timeEnd(component + "-usePropResolution");
  // if (component === 'Button') {
  // if (component === 'Text') {
  //   console.log(
  //     'component thme props 11 ***',
  //     StyleSheet.flatten(incomingProps.INTERNAL_themeStyle)
  //   );
  // }

  resolvedProps.INTERNAL_themeStyle = INTERNAL_themeStyle ? [componentThemeProps.styleFromProps, ...INTERNAL_themeStyle] : [componentThemeProps.styleFromProps]; // if (component === 'Box') {
  //   console.log(
  //     'component thme props 22',
  //     INTERNAL_themeStyle,
  //     resolvedProps.INTERNAL_themeStyle
  //   );
  // }

  resolvedProps = { ...componentThemeProps.restDefaultProps,
    ...resolvedProps
  };

  if (resolvedProps.size) {
    if (!sizesExistsInTheme(componentTheme, resolvedProps.size) && (0, _tools.isLiteral)(resolvedProps.size)) {
      resolvedProps = {
        boxSize: resolvedProps.size,
        ...resolvedProps
      };
    }

    resolvedProps.size = undefined;
  } // if (component === 'SliderThumb') {
  //   console.log(
  //     'property ***',
  //     property,
  //     // incomingProps,
  //     componentThemeProps.internalPseudoProps[property]
  //     // StyleSheet.flatten(pseudoComponentThemeProps.style),
  //     // componentThemeProps.internalPseudoProps
  //     // resolvedProps[property]
  //   );
  // }
  // if (component === 'SliderTrack') {
  //   console.log(
  //     componentThemeProps.internalPseudoProps,
  //     componentThemeProps,
  //     'incoming props here 111'
  //   );
  // }


  for (const property in componentThemeProps.internalPseudoProps) {
    if (_ResolvedStyleMap.PSEUDO_PROP_COMPONENT_MAP[property]) {
      var _resolvedProps$proper;

      const pseudoComponentThemeProps = (0, _ResolvedStyleMap.getThemeProps)("".concat(component, ".").concat(_ResolvedStyleMap.PSEUDO_PROP_COMPONENT_MAP[property]), // { colorMode: 'light' },
      {
        colorMode,
        platform: _reactNative.Platform.OS
      }, {}, incomingProps);
      console.log("".concat(component, ".").concat(_ResolvedStyleMap.PSEUDO_PROP_COMPONENT_MAP[property]), pseudoComponentThemeProps, 'hello 111'); // if (component === 'Radio' && property === '_stack') {
      //   // console.log(pseudoComponentThemeProps, incomingProps, 'property here');
      // }
      // if (component === 'Radio' && property === '_stack') {
      //   console.log(incomingProps, 'property here');
      // }
      // if (component === 'Button') {
      //   console.log(
      //     property,
      //     // componentThemeProps?.unResolvedProps,
      //     pseudoComponentThemeProps,
      //     // resolvedProps,
      //     'hhhhh1111'
      //   );
      // }

      resolvedProps[property] = { ...pseudoComponentThemeProps.restDefaultProps,
        ...componentThemeProps.internalPseudoProps[property],
        ...resolvedProps[property],
        INTERNAL_themeStyle: (_resolvedProps$proper = resolvedProps[property]) !== null && _resolvedProps$proper !== void 0 && _resolvedProps$proper.INTERNAL_themeStyle ? [pseudoComponentThemeProps.styleFromProps, ...resolvedProps[property].INTERNAL_themeStyle] : // resolvedProps[property].INTERNAL_themeStyle.unshift(
        //     pseudoComponentThemeProps.styleFromProps
        //   )
        // [
        //     {
        //       ...pseudoComponentThemeProps.styleFromProps,
        //     },
        //     ...resolvedProps[property].INTERNAL_themeStyle,
        //   ]
        [pseudoComponentThemeProps.styleFromProps]
      }; // resolvedProps[property] = {
      //   ...pseudoComponentThemeProps.restDefaultProps,
      //   ...resolvedProps[property],
      //   INTERNAL_themeStyle: resolvedProps[property]?.INTERNAL_themeStyle
      //     ? [
      //         ...pseudoComponentThemeProps.style,
      //         ...resolvedProps[property].INTERNAL_themeStyle,
      //       ]
      //     : pseudoComponentThemeProps.style,
      // };
      // if (component === 'SliderTrack') {
      //   console.log(
      //     '&&&&&',
      //     incomingProps,
      //     // componentThemeProps.internalPseudoProps[property],
      //     resolvedProps[property]
      //   );
      // }
    } // else if (!pseudoPropStateMap[property]) {
    //   console.log(
    //     property,
    //     componentThemeProps.internalPseudoProps[property],
    //     'hello property'
    //   );
    //   resolvedProps[property] = {
    //     ...resolvedProps[property],
    //     ...componentThemeProps.internalPseudoProps[property],
    //     // INTERNAL_themeStyle: resolvedProps[property]?.INTERNAL_themeStyle
    //     //   ? [
    //     //       ...pseudoComponentThemeProps.style,
    //     //       ...resolvedProps[property].INTERNAL_themeStyle,
    //     //     ]
    //     //   : pseudoComponentThemeProps.style,
    //   };
    // }

  } // }


  if (component === 'Button') {
    console.log(resolvedProps, 'theme props &&&');
  }

  return resolvedProps;
}
/*Resolve all the internal used Pseudo Props*/
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars


const resolvePseudoProps = (flatPseudoProp, baseStylePseudoProp) =>
/** Props coming from Pseudo inside defaultStyles(baseStyle) */
{
  for (const prop in flatPseudoProp) {
    baseStylePseudoProp[prop] = flatPseudoProp[prop];
    /* Replace all the similar prop from from internal props */
  }

  return baseStylePseudoProp;
}; // @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars


const resolveComponentTheme = (themeType, providedTheme, theme, incomingWithDefaultProps, colorModeProps) => {
  try {
    if (themeType[1]) {
      return typeof providedTheme[themeType[0]][themeType[1]] !== 'function' ? providedTheme[themeType[0]][themeType[1]] : providedTheme[themeType[0]][themeType[1]]({
        theme,
        ...incomingWithDefaultProps,
        ...colorModeProps
      });
    } else {
      return typeof providedTheme[themeType[0]] !== 'function' ? providedTheme[themeType[0]] : providedTheme[themeType[0]]({
        theme,
        ...incomingWithDefaultProps,
        ...colorModeProps
      });
    }
  } catch {
    return {};
  }
}; // const isLiteral = (value: any) => {
//   if (typeof value === 'string' || typeof value === 'number') {
//     return true;
//   }
//   return false;
// };


const sizesExistsInTheme = (componentTheme, size) => {
  if (componentTheme !== null && componentTheme !== void 0 && componentTheme.sizes) {
    if (componentTheme.sizes[size]) {
      return true;
    }
  }

  return false;
};

const usePropsResolutionWithComponentTheme = (componentTheme, incomingProps, theme, state, config) => {
  // return incomingProps;
  // optimized-start
  const modifiedPropsForSSR = (0, _useResponsiveSSRProps.useResponsiveSSRProps)(incomingProps, theme); // optimized-end
  // need to think

  const [ignoredProps, cleanIncomingProps] = (0, _tools.extractInObject)(modifiedPropsForSSR, ['children', 'onPress', 'icon', 'onOpen', 'onClose'].concat((config === null || config === void 0 ? void 0 : config.ignoreProps) || []));
  const isSSR = (0, _NativeBaseContext.useNativeBaseConfig)('NativeBase').isSSR;
  const disableCSSMediaQueries = !isSSR;
  const resolveResponsively = ['colorScheme', 'size', 'variant', ...((config === null || config === void 0 ? void 0 : config.resolveResponsively) || [])];
  const colorModeProps = (0, _colorMode.useColorMode)(); // const extendedTheme: Array<any> = [];
  // if (config?.extendTheme) {
  // config?.extendTheme.map((componentName: string) => {
  //   extendedTheme.push(get(theme, `components.${componentName}`, {}));
  // });
  // }
  // if (!isEmpty(componentTheme)) extendedTheme.push(componentTheme);
  // STEP 1: combine default props and incoming props
  // const incomingWithDefaultProps = merge(
  //   {},
  //   componentTheme.defaultProps || {},
  //   cleanIncomingProps
  // );

  let incomingWithDefaultProps = cleanIncomingProps; // TODO: size to boxSize conversion in user props

  if (incomingWithDefaultProps.size) {
    if (!sizesExistsInTheme(componentTheme, incomingWithDefaultProps.size) && (0, _tools.isLiteral)(incomingWithDefaultProps.size)) {
      incomingWithDefaultProps = {
        boxSize: incomingWithDefaultProps.size,
        ...incomingWithDefaultProps
      };
    }

    incomingWithDefaultProps.size = undefined;
  }

  if (incomingWithDefaultProps.variant) {
    incomingWithDefaultProps.variant = undefined;
  } // STEP 1.5: resolving component theme
  // extendedTheme.map((extededComponentTheme: any) => {
  //   if (extededComponentTheme.baseStyle) {
  //     combinedBaseStyle = {
  //       ...combinedBaseStyle,
  //       ...resolveComponentTheme(
  //         ["baseStyle"],
  //         extededComponentTheme,
  //         theme,
  //         incomingWithDefaultProps,
  //         colorModeProps
  //       ),
  //     };
  //   }
  //   if (incomingWithDefaultProps.variant) {
  //     if (extededComponentTheme.variants) {
  //       combinedVariantStyle = {
  //         ...combinedVariantStyle,
  //         ...resolveComponentTheme(
  //           ["variants", incomingWithDefaultProps.variant],
  //           extededComponentTheme,
  //           theme,
  //           incomingWithDefaultProps,
  //           colorModeProps
  //         ),
  //       };
  //     }
  //   }
  //   if (
  //     incomingWithDefaultProps.size &&
  //     extededComponentTheme?.sizes &&
  //     extededComponentTheme?.sizes[incomingWithDefaultProps.size]
  //   ) {
  //     if (
  //       typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] ===
  //         "string" ||
  //       typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] ===
  //         "number"
  //     ) {
  //       incomingWithDefaultProps.size =
  //         extededComponentTheme.sizes[incomingWithDefaultProps.size];
  //     } else {
  //       combinedSizeStyle = {
  //         ...combinedSizeStyle,
  //         ...resolveComponentTheme(
  //           ["sizes", incomingWithDefaultProps.size],
  //           extededComponentTheme,
  //           theme,
  //           incomingWithDefaultProps,
  //           colorModeProps
  //         ),
  //       };
  // incomingWithDefaultProps.size = undefined;
  //     }
  //   }
  // });
  // STEP 2: flatten them
  // if (process.env.NODE_ENV === "development" && cleanIncomingProps.debug) {
  //   /* eslint-disable-next-line */
  //   console.log(
  //     `%cFlattening incoming and Default`,
  //     "background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;"
  //   );
  // }
  // console.log(incomingWithDefaultProps, 'incoming with default');
  //TODO: hack
  //@ts-ignore


  let flattenProps, specificityMap; // eslint-disable-next-line @typescript-eslint/no-unused-vars

  [flattenProps, specificityMap] = (0, _propsFlattener.callPropsFlattener)(incomingWithDefaultProps, {}, 2, cleanIncomingProps, colorModeProps, state, flattenProps, { ...config,
    platform: _reactNative.Platform.OS
  }); // console.log(specificityMap, "*****");
  // console.log("outgoing ******", flattenProps);

  const responsiveProps = {};

  if (disableCSSMediaQueries) {
    // STEP 2.5: resolving responsive props
    resolveResponsively.map(propsName => {
      if (flattenProps[propsName]) {
        // @ts-ignore
        responsiveProps[propsName] = flattenProps[propsName];
      }
    });
  }

  if (resolveResponsively.includes('direction')) {
    const propName = 'direction';

    if (flattenProps[propName]) {
      // @ts-ignore
      responsiveProps[propName] = flattenProps[propName];
    }
  }

  const responsivelyResolvedProps = (0, _useBreakpointResolvedProps.useBreakpointResolvedProps)(responsiveProps);
  flattenProps = { ...flattenProps,
    ...responsivelyResolvedProps
  }; //tested
  // STEP 3: Pass it to baseStyle, then variant and then size and resolve them.
  // NOTE: Resoloving baseStyle
  //tested
  // STEP 4: merge
  // console.log(defaultStyles, "*******");
  // if (!isEmpty(defaultStyles)) {
  //   for (const prop in defaultStyles) {
  //     if (prop.startsWith("_") && flattenProps.hasOwnProperty(prop)) {
  //       /*Resolve all the internal used Pseudo Props*/
  //       defaultStyles[prop] = resolvePseudoProps(
  //         flattenProps[prop],
  //         defaultStyles[prop]
  //       );
  //     }
  //     delete flattenProps[prop];
  //   }
  // }
  // const defaultSpecificity = specificityMap;
  // merge(
  //   {},
  //   specificityMap,
  //   baseSpecificityMap,
  //   variantSpecificityMap,
  //   sizeSpecificityMap
  // );
  // console.log(defaultSpecificity, "h3h3h3");
  // flattenProps = propsSpreader(
  //   { ...defaultStyles, ...flattenProps },
  //   defaultSpecificity
  // );

  const resolvedProps = (0, _tools.omitUndefined)({ ...flattenProps,
    ...ignoredProps
  }); // STEP 5: Return

  return resolvedProps;
};

exports.usePropsResolutionWithComponentTheme = usePropsResolutionWithComponentTheme;
//# sourceMappingURL=usePropsResolution.js.map