"use strict";

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

var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));

var _identifier = require("../../identifier");

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

/* utils */
// import { toComponentName } from 'modules/view-container/deps/toComponentName'

/**
 * @description
 *  || Observable.Container
 *  @ connectToData(TargetViewComponent) // decorates component
 *  |> ViewInsideContainer              // is react wrapper to let containers top into the view
 *  |> Observer(ViewInsideContainer)   // makes it update for any observable property changes
 *  => TargetViewContainer.render     // call original view component, with all our injections form container
 *                                   // ^ such as on props
 * @example
 *    const state = observable({
 *       text: 'loading',
 *       list: [1, 2],
 *    })
 *    class Container {
 *      static connectToData(Target) {
 *         Target = observer(Target)
 *
 *         class ViewInsideContainer extends Target {
 *            componentWillMount() {
 *                setTimeout(() => state.text = 'eh' && list.push(3), 1000)
 *            }
 *            render() {
 *                // or {text={state.text}, list={state.list}}
 *                // but this handles dereferencing problems
 *                return <Target {...state/>
 *            }
 *         }
 *         return observer(ViewInsideContainer)
 *      }
 *    }
 *    class Button extends React.Component {
 *        static types = { text: '' }
 *        componentDidUpdate = () => console.log(this.props.list)
 *        render = () => <button>{this.props.text}</button>
 *    }
 *
 *
 * @example
 *
 *    <Button />
 *
 *    => <button>loading</button>
 *    -> console.log([1, 2, 3])
 *
 *    // 1 second later
 *    => <button>eh</button>
 *    -> console.log([1, 2, 3])
 *
 * @alias decorateHigherOrderComponent
 * @alias decorateComponentStaticProperties
 *
 * @param {ViewInsideContainer} ViewInsideContainer HigherOrder.ReactComponent
 * @param {TargetViewComponent} TargetViewComponent ReactComponent.componentClass
 * @param {ObservableContainer | *} [container=undefined] Container wrapping ReactComponent
 *
 * @inner side effect only - returns component ONLY for convenience :s
 * @return {ViewInsideContainer}
 */
function decorateComponentStatics(ViewInsideContainer, TargetViewComponent, container) {
  /**
   * @tutorial https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
   * @see https://github.com/mridgway/hoist-non-react-statics/blob/master/index.js
   *
   * @description basically copies all properties from 1 class to another
   *              (that aren't going to conflict with a wrapping React.Component)
   */
  (0, _hoistNonReactStatics.default)(ViewInsideContainer, TargetViewComponent);
  /**
   * @see https://reactjs.org/docs/react-component.html#displayname
   * @description this is the name that is displayed in react devtools
   * @type {String}
   * @TODO add store name passed in here
   *
   * this will get the best name for this component
   * 1. if it has static displayName, use that
   * 2. if it's a class, get the constructor/class name
   * 3. if it's a function, get the function name
   * 4. if it has any name prop, use that
   */

  ViewInsideContainer.displayName = (0, _identifier.toComponentName)(TargetViewComponent) + '(' + (0, _identifier.toComponentName)(container) + ')';
  /**
   * @description reference to our container
   * @type {ObservableContainer}
   */

  ViewInsideContainer.container = container;
  /**
   * @tutorial https://reactjs.org/docs/refs-and-the-dom.html
   * @see https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
   * @spec https://www.ecma-international.org/ecma-262/8.0/index.html#sec-object.getownpropertynames
   *
   * @alias originalComponentReference
   * @description gives us a static reference to the original component
   * @type {ReactComponent}
   */

  ViewInsideContainer.wrappedComponentRef = TargetViewComponent;
  /**
   * @see https://github.com/mobxjs/mobx-react/blob/master/src/observer.js#L306
   * @description now we lift the react-specific props
   * @note injector does not want you to do this
   */
  // ViewInsideContainer.contextTypes = TargetViewComponent.contextTypes

  ViewInsideContainer.propTypes = TargetViewComponent.propTypes;
  ViewInsideContainer.defaultProps = TargetViewComponent.defaultProps;
  return ViewInsideContainer;
}

var _default = decorateComponentStatics;
exports.default = _default;