var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { Util, TranslateService } from '../../lib/index';
export class Home {
    constructor() {
        this.translateService = TranslateService.instance;
        this.formEntity = {
            type: "page",
            id: "c8b07866-6b83-4a7b-9811-b78606cabc27",
            attributes: {
                title: "",
                body: "myBody",
                agreement: true,
                language: [
                    { value: "de", text: "Deutsch" },
                    { value: "en", text: "English" },
                    { value: "fr", text: "French", selected: true },
                    { value: "nl", text: "Nederlands" }
                ],
                country: [
                    { value: "DE", text: "Deutschland" },
                    { value: "FR", text: "La France", selected: true },
                    { value: "NL", text: "Nederland" }
                ],
                tags: [
                    { value: "news", text: "News", selected: true },
                    { value: "tutorial", text: "Tutorial" },
                    { value: "archive", text: "Archive" }
                ],
                password: '',
                address: {
                    street: "123 Somewhere",
                    zipcode: "3033TT",
                    city: "Den Haag"
                },
                test2: 'test2value',
            }
        };
    }
    componentDidLoad() {
        this.initForms();
    }
    initForms() {
        return __awaiter(this, void 0, void 0, function* () {
            let entityDefinitions = yield Util.fetchJson('assets/entityDefinitions.json');
            // imperative form
            this.entityForm = this.el.getElementsByTagName('ema-form')[0];
            this.entityForm['setSubmitInterceptor'](this.formSubmitInterceptor);
            this.entityForm['setDefinitions'](entityDefinitions[this.formEntity.type].form);
            this.entityForm['setEntity'](this.formEntity);
            // declarative form
            this.userForm = this.el.getElementsByTagName('ema-form')[1];
            this.userForm['setSubmitInterceptor'](this.formSubmitInterceptor);
            entityDefinitions.user.form.birthdate = {
                constraints: {
                    presence: true,
                    date: {
                        latest: moment().subtract(18, "years"),
                        message: "^You must be at least 18 years old to use this service"
                    }
                }
            };
            this.userForm['setDefinitions'](entityDefinitions.user.form);
            document.addEventListener('formSubmitSucces', this.formSubmitSuccessHandler);
        });
    }
    formSubmitInterceptor(formData, bundle) {
        return __awaiter(this, void 0, void 0, function* () {
            console.log('formSubmitInterceptor');
            console.log(formData);
            // let response = await this.submitForm('apiUrl')
            return formData;
        });
    }
    formSubmitSuccessHandler(event) {
        return __awaiter(this, void 0, void 0, function* () {
            console.log('formSubmitSuccessHandler');
            console.log(event.detail.formData);
        });
    }
    render() {
        return (h("div", { class: 'container' },
            h("ema-tabs", { "selected-index": "1" },
                h("ema-tab-header", { slot: "header", name: "tab-2" }, "entity form"),
                h("ema-tab-content", { slot: "content", name: "tab-2" },
                    h("ema-permission", { read: true },
                        h("ema-form", { language: 'nl' }))),
                h("ema-tab-header", { slot: "header", name: "tab-3a" }, "declarative inline form"),
                h("ema-tab-content", { slot: "content", name: "tab-3a" },
                    h("ema-form", null,
                        h("div", { class: "form-group row" },
                            h("label", { class: "col-md-4 col-form-label", htmlfor: "email" },
                                h("ema-translate", null, "EMAIL")),
                            h("div", { class: "col-md-8" },
                                h("input", { id: "email", class: "form-control", type: "email", placeholder: "", name: "email" })),
                            h("div", { class: "col-md-8 offset-md-4 messages" })),
                        h("div", { class: "form-group row" },
                            h("label", { class: "col-md-4 col-form-label", htmlfor: "password" },
                                h("ema-translate", null, "PASSWORD")),
                            h("div", { class: "col-md-8" },
                                h("input", { id: "password", class: "form-control", type: "password", placeholder: "", name: "password" })),
                            h("div", { class: "col-md-8 offset-md-4 messages" })),
                        h("div", { class: "form-group row" },
                            h("label", { class: "col-md-4 col-form-label", htmlfor: "confirm-password" },
                                h("ema-translate", null, "PASSWORD"),
                                " ",
                                h("ema-translate", { transform: 'lowercase' }, "CONFIRM")),
                            h("div", { class: "col-md-8" },
                                h("input", { id: "confirm-password", class: "form-control", type: "password", placeholder: "", name: "confirm-password" })),
                            h("div", { class: "col-md-8 offset-md-4 messages" })),
                        h("div", { class: "form-group row" },
                            h("label", { class: "col-md-4 col-form-label", htmlfor: "name" },
                                h("ema-translate", null, "USERNAME")),
                            h("div", { class: "col-md-8" },
                                h("input", { id: "name", class: "form-control", type: "text", placeholder: "", name: "name" })),
                            h("div", { class: "col-md-8 offset-md-4 messages" })),
                        h("div", { class: "form-group row" },
                            h("label", { class: "col-md-4 col-form-label", htmlfor: "birthdate" },
                                h("ema-translate", null, "Birthdate")),
                            h("div", { class: "col-md-8" },
                                h("input", { id: "birthdate", class: "form-control", type: "date", placeholder: "dd-mm-yyyy", name: "birthdate" })),
                            h("div", { class: "col-md-8 offset-md-4 messages" })),
                        h("div", { class: "form-group row" },
                            h("label", { class: "col-md-4 col-form-label", htmlfor: "country" },
                                h("ema-translate", null, "Country")),
                            h("div", { class: "col-md-8" },
                                h("select", { id: "country", class: "form-control", name: "country" },
                                    h("option", { value: "" }),
                                    h("option", { value: "BE" }, "Belgium"),
                                    h("option", { value: "FR" }, "France"),
                                    h("option", { value: "DE" }, "Germany"),
                                    h("option", { value: "NL" }, "Netherlands"))),
                            h("div", { class: "col-md-8 offset-md-4 messages" })),
                        h("div", { class: "form-group row" },
                            h("label", { class: "col-md-4 col-form-label", htmlfor: "zip" }, "ZIP Code"),
                            h("div", { class: "col-md-8" },
                                h("input", { id: "zip", class: "form-control", type: "text", placeholder: "1234 AB", name: "zip" })),
                            h("div", { class: "col-md-8 offset-md-4 messages" })))),
                h("ema-tab-header", { slot: "header", name: "tab-1" }, "entity-form (html only)"),
                h("ema-tab-content", { slot: "content", name: "tab-1" },
                    h("ema-form", { "data-json": JSON.stringify(this.formEntity), "definitions-json": '{"title":{"label":"Titel","constraints":{"presence": true}}}', action: 'my-url.php', method: 'post' })))));
    }
    static get is() { return "ema-app-forms"; }
    static get encapsulation() { return "scoped"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-forms:**/"; }
}
//# sourceMappingURL=app-forms.js.map