"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable brace-style */
/**
 * @todo @fixme has big issue with SSR
 */
const react_1 = __importDefault(require("react"));
const exotic_1 = require("exotic");
const mobx_react_1 = require("xmobx/mobx-react");
const FormState_1 = __importDefault(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.default();
    }
}
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 {
    /**
     * @param {React.ClassAttributes} props
     * @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) => {
            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 => {
            // return this.plugin.render()
            // if (isObj(this.plugin) && isFunction(this.plugin.render)) {
            if (this.plugin && this.plugin.render) {
                this.plugin.setPluginProps(props);
                return this.plugin.render();
                // try {
                //   return this.plugin.render()
                // } catch (unknown) {
                //   console.error(unknown)
                // }
            }
            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 = 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 = __decorate([
    mobx_react_1.observer
], ObserverInput);
exports.ObservableInput = ObserverInput;
exports.Input = ObserverInput;
exports.ObserverInput = ObserverInput;
exports.default = ObserverInput;
//# sourceMappingURL=ObserverInput.js.map