/* eslint-disable no-continue */

/* eslint-disable guard-for-in */

/* eslint-disable no-restricted-syntax */
import { isObject, isFunction } from "../../utils/helpers";
import { shortcodes, processors } from "./styleSystem";
/**
 * Expands object to syntax responsive style
 *
 * @example
 * expandResponsive({ mx: [1, 2] })
 * // or
 * expandResponsive({ mx: { base: 1, sm: 2 } })
 */

var expandResponsive = function expandResponsive(styles, theme) {
  var computedStyles = {};
  var _theme$__breakpoints = theme.__breakpoints,
      medias = _theme$__breakpoints.medias,
      isResponsive = _theme$__breakpoints.isResponsive,
      normalize = _theme$__breakpoints.normalize;

  for (var key in styles) {
    var value = styles[key];
    value = isResponsive(value) ? normalize(value) : value;

    if (!Array.isArray(value)) {
      computedStyles[key] = value;
      continue;
    }

    var queries = value.slice(0, medias.length).length;

    for (var index = 0; index < queries; index += 1) {
      var _computedStyles$media;

      var media = medias[index];

      if (!media) {
        computedStyles[key] = value[index];
        continue;
      }

      if (value[index] == null) {
        continue;
      }

      computedStyles[media] = (_computedStyles$media = computedStyles[media]) !== null && _computedStyles$media !== void 0 ? _computedStyles$media : {};
      computedStyles[media][key] = value[index];
    }
  }

  return computedStyles;
};
/**
 * Resolve theme values  
 *
 * @example
 * resolveTokenValue({ color: "primary.500" })
 */


var resolveTokenValue = function resolveTokenValue(token, value, theme) {
  if (value in theme.__map) {
    return theme.__map[value];
  }

  var processor = processors.find(function (pro) {
    return pro.test(token);
  });

  if (processor) {
    var fullToken = "".concat(processor.keyTheme, ".").concat(value);

    if (fullToken in theme.__map) {
      return theme.__map[fullToken];
    }
  }

  return value;
};
/**
 * Expand short codes css properties
 *
 * @example
 * expandShortCode({ mx: "md" })
 */


var expandShortCode = function expandShortCode(styles) {
  var computedStyled = {};

  var _loop = function _loop(key) {
    var value = styles[key];

    if (key in shortcodes) {
      var styleProp = shortcodes[key];

      if (Array.isArray(styleProp)) {
        styleProp.forEach(function (prop) {
          computedStyled[prop] = value;
        });
      } else {
        computedStyled[styleProp] = value;
      }
    } else {
      computedStyled[key] = value;
    }
  };

  for (var key in styles) {
    _loop(key);
  }

  return computedStyled;
};

var css = function css(_styles, theme) {
  /**
   *  Allows pass array values
   *  maxWidth: [400, 600, 800]
   */
  var styles = expandResponsive(_styles, theme);
  /**
   * Converts shortcodes of style prop to valid
   * "mb" -> "marginBottom"
   */

  var stylesExpanded = expandShortCode(styles);
  var computedStyles = {};

  for (var key in stylesExpanded) {
    var valueOrFn = stylesExpanded[key];
    /**
     *  Allows pass function 
     *  boxShadow: theme => `0 5px 15px ${theme.colors.neutral[400]}`
     */

    var value = isFunction(valueOrFn) ? valueOrFn(theme) : valueOrFn;

    if (isObject(value)) {
      computedStyles[key] = css(value, theme);
    } else {
      /**
       * allows use theme tokens in css values
       * padding: "sm" -> padding: "8px"
       */
      computedStyles[key] = resolveTokenValue(key, value, theme);
    }
  }

  return computedStyles;
};

export default css;