"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 exotic_1 = require("exotic");
const strategies_1 = require("../strategies");
const renderProps_1 = require("./renderProps");
const FormContext_1 = require("./FormContext");
let ObserverForm = class ObserverForm extends React.Component {
    constructor() {
        super(...arguments);
        this.handleSubmit = (event) => {
            event.preventDefault();
            /**
             * this is also where we can focus
             * all the errored inputs
             *
             * we can also update the state here that is used by the button
             * for example, adding a property such as
             *  "isSubmitting"
             *  "didSubmitSuccessfully"
             *  "didSubmitError"
             */
            const { state } = this.props;
            const onSubmit = this.props.onSubmit || this.context.onSubmit;
            if (exotic_1.isFunction(onSubmit)) {
                onSubmit({ state, event });
            }
            else {
                // @todo if not production @@production
                const serialized = state.toJSON();
                console.warn('[1forms] no onSubmit prop used');
                console.log(serialized);
            }
        };
    }
    render() {
        const _a = this.props, { renderForm, renderButtonGroup, renderInput } = _a, remainingProps = tslib_1.__rest(_a, ["renderForm", "renderButtonGroup", "renderInput"]);
        // @note - not destructuring above so it stays in `remainingProps`
        const inputListView = this.props.state.inputsList.map(renderInput);
        const baseAttributes = Object.assign({}, remainingProps, { onSubmit: this.handleSubmit });
        // @todo - get name from schema.org?
        const submitView = renderButtonGroup(baseAttributes);
        // @invariant - submit button always comes after form
        //              anyone asking you to change this is bad ux
        const children = (React.createElement(React.Fragment, null,
            inputListView,
            submitView));
        const attributes = Object.assign({}, baseAttributes, { id: this.props.state.identifier, children });
        const formView = renderForm(attributes);
        return React.createElement(FormContext_1.Provider, { value: this.props.state }, formView);
    }
};
ObserverForm.defaultProps = {
    renderForm: renderProps_1.defaultRenderForm,
    renderButtonGroup: renderProps_1.defaultRenderButtonGroup,
};
ObserverForm.contextType = strategies_1.ValidationStrategyContext;
ObserverForm = tslib_1.__decorate([
    mobx_react_1.observer
], ObserverForm);
exports.ObserverForm = ObserverForm;
//# sourceMappingURL=ObserverForm.js.map