"use strict";

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

const tslib_1 = require("tslib");

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

const exotic_1 = require("exotic");

const mobx_react_1 = require("xmobx/mobx-react");

const FormState_1 = require("../form/FormState");

const _elements_1 = require("./_elements");

const deps_1 = require("./deps");

const fixture_1 = require("./fixture");

function toState(props) {
  // because address has string state...
  if (exotic_1.isObj(props.state) === true) {
    return props.state;
  } else {
    console.warn('did not pass state'); // @todo - why is this a form state not input state.......

    return new FormState_1.FormState();
  }
}

function decorateState(props, state) {
  // @todo - with typescript, it does not compile .name property safely
  const name = props.name || props.identity || props.identifier;

  if (name && !state.name && Object.isExtensible(state)) {
    state.name = name;
  }

  if (exotic_1.isFunction(state.setProps)) {
    state.setProps(props);
  }
} // State = typeof FormState


let ObserverInput = class ObserverInput extends react_1.default.Component {
  /**
   * @todo should default pass in parent form on state for parent-child state chain factorying
   */
  constructor(props) {
    super(props); // @note - unused
    // Input = InputElement

    this.Wrap = _elements_1.InputWrap; // ========= @note - command click on the React.Name to see the types =========

    this.handleChange = event => {
      // log('handleChange')
      const value = exotic_1.isObj(event) ? event.target && event.target.value : event;

      if (exotic_1.isFunction(this.state.setValue)) {
        this.state.setValue(value);
      } else {
        console.warn('[ObserverInput] state should implement .setValue');
      } // @note - should not be needed


      this.forceUpdate();
    };

    this.handleFocus = event => {
      // log('handleFocus')
      if (exotic_1.isFunction(this.state.updateFocused)) {
        this.state.updateFocused(event);
      } else {
        console.warn('[ObserverInput] state should implement .updateFocused');
      }

      this.forceUpdate();
    };

    this.handleBlur = event => {// log('handleBlur')
      // this.state.emitBlur(event)
    };

    this.handleToggle = () => {
      // onToggle, onChange, onSelect, onClick...
      // console.log('this.state', this.state, this.props)
      if (exotic_1.isFunction(this.props.onToggle)) {
        this.props.onToggle(this.state);
      } else if (exotic_1.isFunction(this.props.onClick)) {
        // common props - used in makeDefault, maybe gift options
        this.props.onClick();
      } else if (exotic_1.isFunction(this.state.handleToggleSelected) === true) {
        // common state
        this.state.handleToggleSelected();
      } else if (exotic_1.isFunction(this.state.setIsSelected) === true) {
        // input state
        this.state.setIsSelected(!this.state.isSelected);
      } // @note added
      // if (isFunction(this.state.onClick)) {
      //   this.state.onToggle(this.state)
      // }

    };

    this.updateDropDownState = () => {// TODO
      // log('Inside updateDropDownState')
    };
    /**
     * @todo !!! @ganesh this should be an InputChain !!!
     */


    this.renderNestedInputs = (props, index) => {
      if (props.type === fixture_1.inputTypes.groupElement) {
        return this.renderGroupBox(props);
      } else {
        const currentPlugin = deps_1.fromPropsToInputChain(props);

        if (currentPlugin) {
          // console.log('inside plugins modal - Input type: ', props.type)
          const state = props.state ? props.state : props; // currentPlugin.state = state

          const prop = Object.assign({}, props, {
            state
          }); // currentPlugin.props = prop

          currentPlugin.setPluginProps(prop);
          currentPlugin.setPluginState(state);
          return currentPlugin.render();
        } else {
          console.warn('[ObserverInput] Plugin not found!');
        }
      }
    };

    this.renderInput = props => {
      if (this.plugin && this.plugin.render) {
        this.plugin.setPluginProps(props);
        return this.plugin.render();
      } else {
        console.warn('[ObserverInput] missing plugin - (expand for stack trace)');
        console.log(this.plugin);
        return '@@input error';
      }
    };

    this.state = toState(props);
    decorateState(props, this.state); // seemingly the componentWillMount has an issue...

    this.updatePluginFrom(this.props);
  }
  /**
   * @todo @ada
   */


  renderGroupBox(props) {
    const listView = exotic_1.isArray(props.elementList) && props.elementList.map(this.renderNestedInputs);
    return react_1.default.createElement(_elements_1.GroupElementsWrap, {
      className: props.className
    }, listView);
  } // @todo or renderProp


  renderWrap(...children) {
    return react_1.default.createElement(this.Wrap, null, children);
  } // @action


  validate() {
    this.plugin.validate();
  }

  updatePluginFrom(props = this.props) {
    console.info('[ObserverInput] props: ');
    console.dir(props); // if (this.plugin) {
    //   // do we need to make a new chain...?
    //   return
    // }
    // this is actually more of a decorator...

    this.plugin = deps_1.fromPropsToInputChain(props) || this.plugin;

    if (exotic_1.isObj(this.plugin) === true) {
      this.plugin.setPluginState(props.state);
      this.plugin.setPluginProps(props.state); // has no nested test
      // this.plugin.state = this.props.state
      // trigger setter
      // this.plugin.props = this.props
    }
  } // or only on browser...
  // componentDidMount


  componentWillMount() {
    this.updatePluginFrom(this.props);
  }

  render() {
    const {
      type,
      isHidden
    } = this.props; // @todo improve this conditional

    if (deps_1.isVisible(isHidden) === false) {
      return '';
    }

    if (type === fixture_1.inputTypes.groupElement) {
      return this.renderGroupBox(this.props);
    } else {
      return this.renderInput(this.props);
    }
  }

};
ObserverInput.defaultProps = fixture_1.defaultProps;
ObserverInput = tslib_1.__decorate([mobx_react_1.observer], ObserverInput);
exports.ObservableInput = ObserverInput;
exports.Input = ObserverInput;
exports.ObserverInput = ObserverInput;
exports.default = ObserverInput; //# sourceMappingURL=ObserverInput.js.map