import { AppService } from "../../global/app-service";
export class AppRoot {
    constructor() {
        this.initialized = false;
        this.app = AppService.instance;
        this.config = this.app.config;
        this.translation = this.app.translation;
        this.app.init().then((arg) => {
            this.initialized = true;
        });
    }
    render() {
        if (!this.initialized) {
            return (h("div", null,
                h("ema-loading-spinner", { type: "ios", color: "#495057", id: 'loading-spinner' })));
        }
        else {
            return (h("div", null,
                h("ema-router", { "target-selector": "main", level: 0 },
                    h("ema-route", { url: '/', component: 'ema-app-home', exact: true }),
                    h("ema-route", { url: '/components', component: 'ema-app-components', exact: true }),
                    h("ema-route", { url: '/components/:name', component: 'ema-app-components' }),
                    h("ema-route", { url: '/documentation', component: 'ema-app-iframe', componentProps: '{ "iframe-url": "assets/documentation/" }' }),
                    h("ema-route", { url: '/architecture', component: 'sk-dev-stack', exact: true, componentProps: '{ "data-json": {"title":"architecture"}}' }),
                    h("ema-route", { url: '/sketch', component: 'ema-app-sketch', exact: true, componentProps: '{ "data-json": {"title":"Sketch"}}' }),
                    h("ema-route", { url: '/forms', component: 'ema-app-forms' }),
                    h("ema-route", { url: '/dev', component: 'ema-app-dev' }),
                    h("ema-route", { url: '/swagger', component: 'ema-app-swagger' }),
                    h("ema-route", { url: '/drupal/:nid', component: 'ema-app-drupal', componentProps: '{ "drupal-host": "streamer-local" }' }),
                    h("ema-route", { url: '/wordpress/:pid', component: 'ema-app-wordpress' })),
                h("header", null, this.config.get('dev') &&
                    h("ema-navbar", { "item-count": "5", position: "fixed-scroll" },
                        h("ema-route-link", { slot: "item-1", url: '/forms' }, "Forms"),
                        h("ema-route-link", { slot: "item-2", url: '/sketch' }, "Sketch"),
                        h("ema-route-link", { slot: "item-3", url: '/dev' }, "Dev"),
                        h("ema-route-link", { slot: "item-4", url: '/swagger' }, "Swag"),
                        h("ema-route-link", { slot: "item-5", url: '/drupal/1' }, "Drupal"),
                        h("ema-route-link", { slot: "item-6", url: '/wordpress/1' }, "Wp"))),
                h("main", null),
                h("footer", null,
                    h("nav", { class: "navbar navbar-expand-md fixed-bottom" },
                        h("a", { class: "navbar-brand", href: '/' }, this.config.get('name')),
                        h("a", { href: '/' },
                            h("ion-icon", { id: "logo", name: "code", size: "large" })),
                        h("div", { class: "collapse navbar-collapse", id: "navbarCollapse" },
                            h("ul", { class: "navbar-nav mr-auto" },
                                h("li", { class: "nav-item active" },
                                    h("ema-route-link", { url: '/components' }, "Examples")),
                                h("li", { class: "nav-item active" },
                                    h("ema-route-link", { url: '/documentation' }, "Docs")),
                                h("li", { class: "nav-item active" },
                                    h("ema-route-link", { url: '/architecture' }, "Architecture")))),
                        h("button", { class: "navbar-toggler", type: "button", "data-toggle": "collapse", "data-target": "#navbarCollapse", "aria-controls": "navbarCollapse", "aria-expanded": "false", "aria-label": "Toggle navigation" },
                            h("span", { class: "navbar-toggler-icon" })))),
                h("ema-flash-message", null),
                h("ema-dialog", { id: 'app-dialog', "allow-close": "true" }),
                h("ema-modal", { id: 'app-modal' }),
                h("ema-modal", { id: 'login-modal', "modal-title": this.translation.get('LOGIN'), width: '80%', "allow-close": "true" },
                    h("ema-login-form", { id: 'app-login-form', language: this.config.get('language') })),
                h("ema-debugger", { type: 'dwp', "api-url": 'api/', "history-size": '100', "max-level": -1, "collapse-at": 4 })));
        }
    }
    static get is() { return "ema-app-root"; }
    static get properties() { return {
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "errorMessage": {
            "state": true
        },
        "initialized": {
            "state": true
        },
        "state": {
            "state": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-root:**/"; }
}
