"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var builder_block_decorator_1 = require("../../decorators/builder-block.decorator");
var builder_block_component_1 = require("../../components/builder-block.component");
var sdk_1 = require("@builder.io/sdk");
var builder_blocks_component_1 = require("../../components/builder-blocks.component");
var builder_store_1 = require("../../store/builder-store");
var react_native_1 = require("react-native");
var Form = /** @class */ (function (_super) {
    __extends(Form, _super);
    function Form() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.ref = null;
        // TODO: link this state to global state and allow togglign the modes in
        // the style and or data editor. TODO: for now some kind of input for preview state
        // that only impacts in the editor?
        _this.state = {
            state: 'unsubmitted',
            // TODO: separate response and error?
            respnoseData: null,
            formErrorMessage: '',
        };
        return _this;
    }
    Object.defineProperty(Form.prototype, "submissionState", {
        get: function () {
            return (sdk_1.Builder.isEditing && this.props.previewState) || this.state.state;
        },
        enumerable: true,
        configurable: true
    });
    Form.prototype.render = function () {
        var _this = this;
        return (
        // TODO: JS data bindings
        react_1.default.createElement(builder_store_1.BuilderStoreContext.Consumer, null, function (state) { return (react_1.default.createElement(builder_store_1.BuilderStoreContext.Provider, { value: __assign(__assign({}, state), { state: __assign(__assign({}, state.state), { formErrorMessage: _this.state.formErrorMessage }) }) },
            react_1.default.createElement(react_native_1.View
            // validate={this.props.validate}
            // ref={ref => (this.ref = ref)}
            , __assign({ 
                // validate={this.props.validate}
                // ref={ref => (this.ref = ref)}
                action: !_this.props.sendWithJs && _this.props.action, method: _this.props.method, name: _this.props.name }, _this.props.attributes),
                _this.props.builderBlock &&
                    _this.props.builderBlock.children &&
                    _this.props.builderBlock.children.map(function (block, index) { return (react_1.default.createElement(builder_block_component_1.BuilderBlock, { key: block.id, block: block })); }),
                _this.submissionState === 'error' && (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { dataPath: "errorMessage", blocks: _this.props.errorMessage })),
                _this.submissionState === 'sending' && (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { dataPath: "sendingMessage", blocks: _this.props.sendingMessage })),
                _this.submissionState === 'error' && _this.state.respnoseData && (
                // TODO: tag to edit
                react_1.default.createElement(react_native_1.Text
                // className="builder-form-error-text"
                , { 
                    // className="builder-form-error-text"
                    style: { padding: 10, color: 'red', textAlign: 'center' } }, JSON.stringify(_this.state.respnoseData, null, 2))),
                _this.submissionState === 'success' && (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { dataPath: "successMessage", blocks: _this.props.successMessage }))))); }));
    };
    Form = __decorate([
        builder_block_decorator_1.BuilderBlock({
            name: 'Form:Form',
            // editableTags: ['builder-form-error']
            defaults: {
                responsiveStyles: {
                    large: {
                        marginTop: '15px',
                        paddingBottom: '15px',
                    },
                },
            },
            image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
            inputs: [
                {
                    name: 'sendSubmissionsTo',
                    type: 'string',
                    // TODO: builder, email
                    // Later - more integrations like mailchimp
                    enum: ['zapier', 'custom'],
                    hideFromUI: true,
                    defaultValue: 'custom',
                },
                {
                    name: 'sendWithJs',
                    type: 'boolean',
                    helperText: 'Set to false to use basic html form action',
                    defaultValue: true,
                    showIf: 'options.get("sendSubmissionsTo") === "custom"',
                },
                {
                    name: 'name',
                    type: 'string',
                    showIf: 'options.get("sendSubmissionsTo") === "zapier"',
                },
                {
                    name: 'action',
                    type: 'string',
                    helperText: 'URL to send the form data to',
                    showIf: 'options.get("sendSubmissionsTo") === "custom"',
                },
                {
                    name: 'contentType',
                    type: 'string',
                    defaultValue: 'application/json',
                    advanced: true,
                    // TODO: do automatically if file input
                    enum: ['application/json', 'multipart/formdata', 'application/x-www-form-urlencoded'],
                    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
                },
                {
                    name: 'method',
                    type: 'string',
                    showIf: 'options.get("sendSubmissionsTo") === "custom"',
                    advanced: true,
                },
                {
                    name: 'successUrl',
                    type: 'url',
                    helperText: 'Optional URL to redirect the user to on form submission success',
                    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
                },
                {
                    name: 'resetFormOnSubmit',
                    type: 'boolean',
                    showIf: function (options) {
                        return options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true;
                    },
                    advanced: true,
                },
                // TODO: maybe
                // {
                //   name: 'apiErrorMessageField',
                //   type: 'text',
                //   helperText: 'URL to redirect the user to on form submission success',
                //   showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
                // },
                {
                    // editState?
                    name: 'previewState',
                    type: 'string',
                    enum: ['unsubmitted', 'sending', 'success', 'error'],
                    helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
                    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
                },
                {
                    name: 'successMessage',
                    type: 'uiBlocks',
                    hideFromUI: true,
                    defaultValue: [
                        {
                            '@type': '@builder.io/sdk:Element',
                            responsiveStyles: {
                                large: {
                                    marginTop: '10px',
                                },
                            },
                            component: {
                                name: 'Text',
                                options: {
                                    text: '<span>Thanks!</span>',
                                },
                            },
                        },
                    ],
                },
                {
                    name: 'validate',
                    type: 'boolean',
                    defaultValue: true,
                    advanced: true,
                },
                {
                    name: 'errorMessagePath',
                    type: 'text',
                    advanced: true,
                    helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}',
                },
                {
                    name: 'errorMessage',
                    type: 'uiBlocks',
                    hideFromUI: true,
                    defaultValue: [
                        {
                            '@type': '@builder.io/sdk:Element',
                            responsiveStyles: {
                                large: {
                                    marginTop: '10px',
                                },
                            },
                            bindings: {
                                'component.options.text': 'state.formErrorMessage || block.component.options.text',
                            },
                            component: {
                                name: 'Text',
                                options: {
                                    // TODO: how pull in API message
                                    text: '<span>Form submission error :( Please check your answers and try again</span>',
                                },
                            },
                        },
                    ],
                },
                {
                    name: 'sendingMessage',
                    type: 'uiBlocks',
                    hideFromUI: true,
                    defaultValue: [
                        {
                            '@type': '@builder.io/sdk:Element',
                            responsiveStyles: {
                                large: {
                                    marginTop: '10px',
                                },
                            },
                            component: {
                                name: 'Text',
                                options: {
                                    // TODO: how pull in API message
                                    text: '<span>Sending...</span>',
                                },
                            },
                        },
                    ],
                },
                __assign(__assign({ name: 'customHeaders', type: 'map' }, {
                    valueType: {
                        type: 'string',
                    },
                }), { advanced: true, showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true' }),
            ],
            noWrap: true,
            // TODO: defaultChildren with two inputs and submit button
            canHaveChildren: true,
            defaultChildren: [
                {
                    '@type': '@builder.io/sdk:Element',
                    responsiveStyles: {
                        large: {
                            marginTop: '10px',
                        },
                    },
                    component: {
                        name: 'Text',
                        options: {
                            text: '<span>Enter your name</span>',
                        },
                    },
                },
                {
                    '@type': '@builder.io/sdk:Element',
                    responsiveStyles: {
                        large: {
                            marginTop: '10px',
                        },
                    },
                    component: {
                        name: 'Form:Input',
                        options: {
                            name: 'name',
                            placeholder: 'Jane Doe',
                        },
                    },
                },
                {
                    '@type': '@builder.io/sdk:Element',
                    responsiveStyles: {
                        large: {
                            marginTop: '10px',
                        },
                    },
                    component: {
                        name: 'Text',
                        options: {
                            text: '<span>Enter your email</span>',
                        },
                    },
                },
                {
                    '@type': '@builder.io/sdk:Element',
                    responsiveStyles: {
                        large: {
                            marginTop: '10px',
                        },
                    },
                    component: {
                        name: 'Form:Input',
                        options: {
                            name: 'email',
                            placeholder: 'jane@doe.com',
                        },
                    },
                },
                {
                    '@type': '@builder.io/sdk:Element',
                    responsiveStyles: {
                        large: {
                            marginTop: '10px',
                        },
                    },
                    component: {
                        name: 'Form:SubmitButton',
                        options: {
                            text: 'Submit',
                        },
                    },
                },
            ],
        })
    ], Form);
    return Form;
}(react_1.default.Component));
exports.Form = Form;
//# sourceMappingURL=Form.js.map