"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
var _a;
const React = 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);
    }
}
const DEPRECIATED = Symbol.for('@depreciated');
// State = typeof FormState
let ObserverInput = class ObserverInput extends React.Component {
    /**
     * @todo should default pass in parent form on state for parent-child state chain factorying
     */
    constructor(props) {
        super(props);
        this[_a] = true;
        // @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.createElement(_elements_1.GroupElementsWrap, { className: props.className }, listView));
    }
    // @todo or renderProp
    renderWrap(...children) {
        return React.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);
        }
    }
};
_a = DEPRECIATED;
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