"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = require("react");
const mobx_react_1 = require("xmobx/mobx-react");
const strategies_1 = require("../strategies");
const renderProps_1 = require("./renderProps");
const InputContext_1 = require("./InputContext");
const deps_1 = require("./deps");
/**
 * @thought
 *       observable stuff here should be probably in the render of plugin
 * @thought
 *       we *may* want to support `onChange` here
 *       but probably best to allow *only 1 way* (using state)
 */
let ObserverInput = class ObserverInput extends React.Component {
    /**
     * @thought
     *       observable stuff here should be probably in the render of plugin
     * @thought
     *       we *may* want to support `onChange` here
     *       but probably best to allow *only 1 way* (using state)
     */
    constructor() {
        super(...arguments);
        this.observableState = deps_1.fromPropsToInputState(this.props);
        this.handleChange = (event) => {
            this.observableState.setValue(event.target.value);
            this.context.onChange({ state: this.observableState, event });
        };
        this.handleOnFocus = (event) => {
            this.observableState.setIsActive(true);
            this.context.onFocus({ state: this.observableState, event });
        };
        this.handleOnBlur = (event) => {
            this.observableState.setIsActive(false);
            this.context.onBlur({ state: this.observableState, event });
        };
    }
    render() {
        const props = this.props;
        const { renderAfterInput, renderError, renderLabelText, renderWrap, renderInput, state } = props, remainingProps = tslib_1.__rest(props, ["renderAfterInput", "renderError", "renderLabelText", "renderWrap", "renderInput", "state"]);
        const { type, value, label, 
        // identifier,
        // isActive,
        // isValid,
        onChange, onFocus, onBlur } = remainingProps, strippedRemainingProps = tslib_1.__rest(remainingProps
        /**
         * @todo we could probably get rid of most of this if we use context
         *      ^ ONLY THING TO NOTE IS PROPS VS STATE
         */
        , ["type", "value", "label", "onChange", "onFocus", "onBlur"]);
        /**
         * @todo we could probably get rid of most of this if we use context
         *      ^ ONLY THING TO NOTE IS PROPS VS STATE
         */
        const renderInputProps = Object.assign({}, this.observableState.attributes, { identifier: this.observableState.identifier, type: type || this.observableState.type, value: this.observableState.value, label: this.observableState.label || label, state: this.observableState, isDisabled: this.observableState.isDisabled, isDirty: this.observableState.isDirty, isActive: this.observableState.isActive, isValid: this.observableState.isValid, onChange: this.handleChange, onFocus: this.handleOnFocus, onBlur: this.handleOnBlur }, strippedRemainingProps);
        const Wrap = renderWrap;
        // @note was remainingProps
        const renderPropProps = Object.assign({ state }, renderInputProps);
        return (React.createElement(InputContext_1.Provider, { value: this.observableState },
            React.createElement(Wrap, Object.assign({}, remainingProps),
                renderLabelText(renderPropProps),
                renderInput(renderInputProps),
                renderAfterInput(renderPropProps),
                renderError(renderPropProps))));
    }
};
ObserverInput.contextType = strategies_1.ValidationStrategyContext;
ObserverInput.defaultProps = {
    renderInput: renderProps_1.defaultRender,
    renderWrap: renderProps_1.defaultRenderWrap,
    renderLabelText: renderProps_1.defaultRenderLabelText,
    renderAfterInput: renderProps_1.defaultRenderAfterInput,
    renderError: renderProps_1.defaultRenderError,
};
ObserverInput = tslib_1.__decorate([
    mobx_react_1.observer
], ObserverInput);
exports.ObserverInput = ObserverInput;
//# sourceMappingURL=ObserverInput.js.map