"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");
/**
 * @see https://codesandbox.io/s/ppw027o70 (.map example)
 * @see https://codesandbox.io/s/m33vrr37r8 (this code in this file)
 */


const react_1 = tslib_1.__importDefault(require("react"));

const mobx_1 = require("xmobx/mobx");

const exotic_1 = require("exotic");

const observableList = [];
window.observableList = observableList;

const fromComponentToPropsThatPickupObservablesAndRef = component => {
  // scope this so we can lazily get the ref
  const scoped = {
    ref: component
  }; // @note it's frozen

  const props = Object.assign({}, component.props, {
    /**
     * @see https://github.com/facebook/react/issues/8873#issuecomment-275423780
     */
    ref: ref => {
      scoped.ref = ref;
    }
  }); // find the observables, put them in the list

  Object.keys(props).forEach(key => {
    const value = props[key];

    if (exotic_1.isObj(value) && mobx_1.isObservable(value)) {
      const entry = {
        state: value,

        get component() {
          return scoped.ref;
        }

      };
      observableList.push(entry);
    }
  });
  return props;
};

const traverseChildren = child => {
  if (exotic_1.isString(child) || exotic_1.isNumber(child)) {
    return child;
  }

  const props = fromComponentToPropsThatPickupObservablesAndRef(child); // traverse

  if (props.children) {
    props.children = traverseChildren(props.children);
  }

  return react_1.default.cloneElement(child, props);
};
/**
 * @example <Debug>{...anything}</Debug>
 */


class Debug extends react_1.default.Component {
  render() {
    const {
      children
    } = this.props;
    return react_1.default.Children.map(children, traverseChildren);
  }

}

exports.Debug = Debug;
exports.default = Debug; //# sourceMappingURL=index.js.map