import { AppService } from "../../global/app-service";
export class AppRoot {
    // @Prop() baseUrl = "https://ema-js-base.firebaseapp.com";
    // @Prop() history: RouterHistory;
    constructor() {
        this.loading = true;
        this.baseUrl = '';
        this.app = AppService.instance;
        this.config = this.app.config;
        this.translation = this.app.base.translation;
        // observable subsribers
        this.app.store$.subscribe((state) => {
            this.state = state;
            this.render();
        });
        this.app.config$.subscribe((config) => {
            // this.config = config;
            this.render();
        });
        this.app.init(this, this.baseUrl).then(() => {
            this.loading = false;
        });
    }
    // fixme:
    // @Watch('history')
    // watchHandler(newValue: boolean, oldValue: boolean) {
    //     console.log('The old value of history is: ', oldValue);
    //     console.log('The new value of history is: ', newValue);
    // }
    svgElementClickHandler(event) {
        let id = event.detail.id;
        if (id === 'btn-login') {
            document.getElementById('login-modal')['show']();
        }
        if (id === 'btn-logo') {
            // console.log(el);
        }
        console.log('svg id: ', id);
    }
    render() {
        if (this.loading) {
            return (h("div", null,
                h("ema-loading-spinner", { type: "ios", color: "#495057", id: 'loading-spinner' })));
        }
        else {
            return (h("div", null,
                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", { errorMessage: '' })),
                h("ema-debugger", { type: 'dwp', "api-url": 'api/', "history-size": '100', "max-level": -1, "collapse-at": 4 }),
                h("header", null,
                    h("nav", { class: "navbar navbar-expand-md fixed-top" },
                        h("ion-icon", { id: "logo", name: "code", size: "large" }),
                        h("a", { class: "navbar-brand", href: '/' }, this.config.get('name')),
                        h("div", { class: "collapse navbar-collapse", id: "navbarCollapse" },
                            h("ul", { class: "navbar-nav mr-auto" },
                                h("li", { class: "nav-item active" },
                                    h("stencil-route-link", { url: '/components' }, "Webcomponents")),
                                h("li", { class: "nav-item active" },
                                    h("stencil-route-link", { url: '/documentation' }, "Docs: lib")),
                                h("li", { class: "nav-item active" },
                                    h("stencil-route-link", { url: '/documentation-components' }, "Docs: components")),
                                h("li", { class: "nav-item active" },
                                    h("stencil-route-link", { url: '/architecture' }, "Architecture")),
                                this.config.get('dev') &&
                                    h("li", { class: "nav-item active" },
                                        h("stencil-route-link", { url: '/forms' }, "Forms")),
                                this.config.get('dev') &&
                                    h("li", { class: "nav-item active" },
                                        h("stencil-route-link", { url: '/dev' }, "Dev")),
                                this.config.get('dev') &&
                                    h("li", { class: "nav-item active" },
                                        h("stencil-route-link", { url: '/swagger' }, "Swagger")),
                                this.config.get('dev') &&
                                    h("li", { class: "nav-item active" },
                                        h("stencil-route-link", { url: '/drupal' }, "Drupal")),
                                this.config.get('dev') &&
                                    h("li", { class: "nav-item active" },
                                        h("stencil-route-link", { url: '/wordpress/1' }, "Wp")))),
                        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("main", null,
                    h("stencil-router", null,
                        h("stencil-route", { url: '/', component: 'ema-app-home', exact: true }),
                        h("stencil-route", { url: '/components', component: 'ema-app-components', exact: true }),
                        h("stencil-route", { url: '/components/:name', component: 'ema-app-components' }),
                        h("stencil-route", { url: '/documentation', component: 'ema-app-iframe', exact: true, componentProps: { iframeUrl: 'assets/documentation/' } }),
                        h("stencil-route", { url: '/documentation-components', component: 'ema-app-iframe', exact: true, componentProps: { iframeUrl: 'assets/documentation-components/' } }),
                        h("stencil-route", { url: '/architecture', component: 'ema-app-architecture', exact: true }),
                        h("stencil-route", { url: '/forms', component: 'ema-app-forms' }),
                        h("stencil-route", { url: '/dev', component: 'ema-app-dev' }),
                        h("stencil-route", { url: '/swagger', component: 'ema-app-swagger' }),
                        h("stencil-route", { url: '/drupal', component: 'ema-app-drupal', componentProps: { configJson: JSON.stringify(this.config.get('drupal')['streamer-local']) } }),
                        h("stencil-route", { url: '/wordpress/:pid', component: 'ema-app-wordpress' }),
                        h("stencil-route", { url: '/schema', component: 'ema-app-home' })))));
        }
    }
    static get is() { return "ema-app-root"; }
    static get properties() { return {
        "baseUrl": {
            "type": String,
            "attr": "base-url"
        },
        "errorMessage": {
            "state": true
        },
        "loading": {
            "state": true
        },
        "state": {
            "state": true
        }
    }; }
    static get listeners() { return [{
            "name": "svgElementClick",
            "method": "svgElementClickHandler"
        }]; }
    static get style() { return "/**style-placeholder:ema-app-root:**/"; }
}
//# sourceMappingURL=app-root.js.map