import { timer, fromEvent } from 'rxjs';
import { ConversionService, HttpService, TranslateService } from '@ema/core';
export class Home {
    constructor() {
        this.loading = true;
        this.conversion = ConversionService.instance;
        this.http = HttpService.instance;
        this.translateService = TranslateService.instance;
        this.translate = this.translateService.get;
        this.formEntityTest = {
            type: "page",
            id: "c8b07866-6b83-4a7b-9811-b78606cabc27",
            attributes: {
                title: "my title",
                body: "my content",
                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',
            },
            "relationships": {}
        };
    }
    componentDidLoad() {
        this.translateService.registerTranslateComponents();
        this.loadData().then(() => {
            timer(200).subscribe(() => {
                this.initForms();
            });
        });
    }
    async loadData() {
        this.testEntityFormData = await this.http.get('assets/data/mock-entity.json');
        this.entityDefinitions = await this.http.get('assets/entityDefinitions.json');
        this.loading = false;
    }
    async initForms() {
        fromEvent(document, 'formSubmit').subscribe((e) => {
            this.formSubmitHandler(e);
        });
        this.entityTestForm = document.getElementById('testEditor');
        this.entityTestForm['setData'](this.testEntityFormData);
        this.entityForm = document.getElementById('entityForm');
        this.entityForm['setEntity'](this.formEntityTest);
        this.entityForm['setDefinitions'](this.entityDefinitions[this.formEntityTest.type].definitions);
        this.entityForm['setSubmitInterceptor'](this.formSubmitInterceptor);
        this.entityForm['dataType'] = this.formEntityTest.type;
        this.userForm = document.getElementById('userForm');
        this.userForm['setSubmitInterceptor'](this.formSubmitInterceptor);
        this.entityDefinitions.user.definitions.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'](this.entityDefinitions.user.definitions);
        this.entityForm2 = document.getElementById('entityForm2');
        this.loginForm = document.getElementById('loginForm');
    }
    async formSubmitInterceptor(formData, bundle) {
        console.log('formSubmitInterceptor');
        console.log(formData);
        return formData;
    }
    async formSubmitHandler(event) {
        console.log('formSubmitHandler');
        console.log(event.detail);
        if (event.target === this.loginForm) {
            timer(2000).subscribe((arg) => {
                this.loginForm['submitError'] = 'LOGIN ERROR';
                this.loginForm['dataJson'] = JSON.stringify(event.detail.data);
            });
        }
    }
    render() {
        if (this.loading) {
            return (h("ema-loading-spinner", null));
        }
        else {
            return (h("div", { class: 'container' },
                h("ema-tabs", { "selected-index": "5" },
                    h("ema-tab-header", { slot: "header", name: "tab-conf" }, "Test entity editor"),
                    h("ema-tab-content", { slot: "content", name: "tab-conf" },
                        h("ema-form", { id: 'testEditor' })),
                    h("ema-tab-header", { slot: "header", name: "tab-2" }, "Entity form"),
                    h("ema-tab-content", { slot: "content", name: "tab-2" },
                        h("ema-form", { id: 'entityForm', 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", { id: 'userForm' },
                            h("div", { class: "form-group row" },
                                h("label", { class: "col-md-4 col-form-label", htmlFor: "email" },
                                    h("ema-translate", { string: '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", { string: '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", { string: '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", { string: '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", { string: '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", { string: '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("div", { class: "form-group row" },
                                h("div", { class: "col-md-8 offset-md-4" },
                                    h("button", { type: "submit", class: "btn btn-primary mr-2" },
                                        h("ema-translate", { string: 'SUBMIT' })),
                                    h("button", { type: "reset", class: "btn btn-primary" },
                                        h("ema-translate", null, "RESET"))),
                                h("div", { class: "col-md-8 offset-md-4 messages help-block error" },
                                    h("ema-translate", { string: this.submitError }),
                                    ".")))),
                    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", { id: 'entityForm2', "data-json": JSON.stringify(this.formEntityTest), "definitions-json": JSON.stringify(this.entityDefinitions[this.formEntityTest.type]) })),
                    h("ema-tab-header", { slot: "header", name: "tab-login" }, "Login form"),
                    h("ema-tab-content", { slot: "content", name: "tab-login" },
                        h("ema-login-form", { id: 'loginForm', type: 'email-password', language: 'nl', "submit-error": this.submitError, "data-json": JSON.stringify(this.formEntityTest), "definitions-json": JSON.stringify(this.entityDefinitions[this.formEntityTest.type]) })))));
        }
    }
    static get is() { return "ema-app-forms"; }
    static get encapsulation() { return "scoped"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "loading": {
            "state": true
        },
        "submitError": {
            "state": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-forms:**/"; }
}
