import { h } from '../webcomponents.core.js';

import './chunk-de721f0a.js';
import { w as timer, v as fromEvent } from './chunk-fec5a75d.js';
import { l as ConversionService, m as HttpService, n as TranslateService } from './chunk-f9f1602a.js';

class Home {
    constructor() {
        this.sumbitError = 'FORM INVALID';
        this.loading = true;
        this.conversion = ConversionService.instance;
        this.http = HttpService.instance;
        this.translateService = TranslateService.instance;
        this.translate = this.translateService.get;
        this.formEntity = {
            type: "page",
            id: "c8b07866-6b83-4a7b-9811-b78606cabc27",
            attributes: {
                title: "test",
                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',
            },
            "relationships": {}
        };
    }
    componentDidLoad() {
        this.translateService.registerTranslateComponents();
        this.loadData().then(() => {
            timer(200).subscribe(() => {
                this.initForms();
            });
        });
    }
    async loadData() {
        this.uaasConfigFormData = await this.http.get('assets/data/mock-uaas-config.json');
        this.entityDefinitions = await this.http.get('assets/entityDefinitions.json');
        this.loading = false;
    }
    async initForms() {
        fromEvent(document, 'formSubmit').subscribe((e) => {
            this.formSubmitHandler(e);
        });
        this.uaasConfigForm = document.getElementById('configEditor');
        this.uaasConfigForm['setData'](this.uaasConfigFormData);
        this.entityForm = document.getElementById('entityForm');
        this.entityForm['setEntity'](this.formEntity);
        this.entityForm['setDefinitions'](this.entityDefinitions[this.formEntity.type].definitions);
        this.entityForm['setSubmitInterceptor'](this.formSubmitInterceptor);
        this.entityForm['dataType'] = this.formEntity.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');
    }
    async formSubmitInterceptor(formData, bundle) {
        console.log('formSubmitInterceptor');
        console.log(formData);
        return formData;
    }
    async formSubmitHandler(event) {
        console.log('formSubmitHandler');
        console.log(event.detail);
        console.log(this.conversion.toJsonApi(event.detail.data, 'page'));
    }
    render() {
        if (this.loading) {
            return (h("ema-loading-spinner", null));
        }
        else {
            return (h("div", { class: 'container' },
                h("ema-tabs", { "selected-index": "1" },
                    h("ema-tab-header", { slot: "header", name: "tab-conf" }, "Uaas config editor"),
                    h("ema-tab-content", { slot: "content", name: "tab-conf" },
                        h("ema-form", { id: 'configEditor' })),
                    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.sumbitError }),
                                    ".")))),
                    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.formEntity), "definitions-json": JSON.stringify(this.entityDefinitions[this.formEntity.type]) })))));
        }
    }
    static get is() { return "ema-app-forms"; }
    static get encapsulation() { return "scoped"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "loading": {
            "state": true
        }
    }; }
    static get style() { return ""; }
}

class TranslateComponent {
    constructor() {
        this.paramsJson = '{}';
        this.transform = 'none';
        this.translate = TranslateService.instance;
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    async postRender() {
        let str = this.el.querySelector('span').innerText.trim();
        if (this.string && this.string !== '') {
            str = this.string;
        }
        if (this.language && this.language !== this.translate.language) {
            if (this.translationsLocation) {
                this.translate.translationsLocation = this.translationsLocation;
            }
            await this.translate.use(this.language);
        }
        this.translation = this.translate.get(str);
        if (this.params) {
            this.translation = this.translate.get(str, this.params);
        }
        if (this.paramsJson !== '{}') {
            let args = [str];
            let params = JSON.parse(this.paramsJson);
            params.forEach((v) => {
                args.push(v);
            });
            this.translation = this.translate.get.apply(this.translate, args);
        }
        if (this.transform) {
            this.transformTranslation(this.transform);
        }
        this.el.querySelector('span').innerText = this.translation;
    }
    async get(string) {
        return this.translate.get(string);
    }
    async set(string, language, transform) {
        this.translation = await this.translate.get(string);
        this.postRender();
    }
    async setTranslateService(instance) {
        this.translate = instance;
        this.postRender();
    }
    async update() {
        this.postRender();
    }
    transformTranslation(type) {
        if (type === 'lowercase') {
            this.translation = this.translation.toLowerCase();
        }
        if (type === 'lowercaseFirst') {
            this.translation = this.translation.charAt(0).toLowerCase() + this.translation.slice(1);
        }
        if (type === 'uppercase') {
            this.translation = this.translation.toUpperCase();
        }
        if (type === 'uppercaseFirst') {
            this.translation = this.translation.charAt(0).toUpperCase() + this.translation.slice(1);
        }
    }
    render() {
        return (h("span", null,
            h("slot", null)));
    }
    static get is() { return "ema-translate"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "get": {
            "method": true
        },
        "language": {
            "type": String,
            "attr": "language"
        },
        "params": {
            "type": String,
            "attr": "params"
        },
        "paramsJson": {
            "type": String,
            "attr": "params-json"
        },
        "set": {
            "method": true
        },
        "setTranslateService": {
            "method": true
        },
        "string": {
            "type": String,
            "attr": "string"
        },
        "transform": {
            "type": String,
            "attr": "transform"
        },
        "translation": {
            "state": true
        },
        "translationsLocation": {
            "type": String,
            "attr": "translations-location"
        },
        "update": {
            "method": true
        }
    }; }
}

export { Home as EmaAppForms, TranslateComponent as EmaTranslate };
