import { Drupal } from '@ema/core';
import { ConfigService } from '@ema/core';
export class AppDrupal {
    constructor() {
        this.config = ConfigService.instance;
        this.loading = true;
        this.authenticated = false;
    }
    componentWillLoad() {
        this.drupal = new Drupal();
        this.init(this.config.get('drupal')[this.drupalHost]);
    }
    componentDidLoad() {
    }
    async init(config) {
        let router = document.getElementsByTagName('ema-router')[0];
        this.currentNid = config['front_page_nid'];
        await router.getState().then((routerState) => {
            if (routerState.context.params.nid) {
                this.currentNid = routerState.context.params.nid;
            }
        });
        await this.drupal.init(config);
        await this.getData();
        this.authenticated = this.drupal.authenticated;
        this.model = this.drupal.model;
        this.loading = false;
        setTimeout(() => {
            this.loginModal = document.getElementById('drupal-login-modal');
            this.loginForm = this.el.getElementsByTagName('ema-login-form')[0];
            this.loginForm.addEventListener('formSubmit', (e) => {
                this.login(e.detail.data.username, e.detail.data.password);
            });
        }, 200);
    }
    async getData() {
        await this.drupal.jsonApi.getCollection('view--view');
        await this.drupal.nodeLoad(this.drupal.options.frontpage_nid);
        await this.drupal.menuLoad(this.drupal.options.main_menu, true);
        this.currentNode = await this.drupal.jsonApi.getNode(this.currentNid);
        return;
    }
    login(username, password) {
        this.drupal.login(username, password).then((res) => {
            this.loginModal['hide']();
            this.authenticated = true;
        }).catch((error) => {
            console.log(error);
            this.loginForm['submitError'] = 'LOGIN ERROR';
        });
    }
    logout() {
        this.drupal.logout().then(() => {
            this.authenticated = false;
        });
    }
    async onMenuClick(item) {
        if (item.link.route_parameters.node) {
            this.currentNode = await this.drupal.jsonApi.getNode(item.link.route_parameters.node);
        }
    }
    showLoginModal() {
        this.loginModal['show']();
    }
    render() {
        if (this.model && this.currentNode) {
            return (h("div", { class: 'ema-app-drupal' },
                h("ema-drupal-node", { class: "text-center", "data-json": JSON.stringify(this.currentNode) }),
                !this.authenticated &&
                    h("button", { class: "btn btn-primary float-right", id: "login-button", onClick: () => this.showLoginModal() }, "login"),
                this.authenticated &&
                    h("button", { class: "btn btn-primary float-right", id: "logout-button", onClick: () => this.logout() }, "logout"),
                h("ema-modal", { id: 'drupal-login-modal', "modal-title": 'Login', width: '80%', "allow-close": "true" },
                    h("ema-login-form", { language: this.config.get('language'), type: 'name-password' })),
                h("footer", null,
                    h("nav", { class: "navbar navbar-expand-md fixed-bottom" },
                        h("div", { class: "collapse navbar-collapse", id: "navbarCollapse" },
                            h("ul", { class: "navbar-nav" }, this.model.menus[this.drupal.options.main_menu].map(item => h("li", null,
                                h("a", { onClick: (e) => this.onMenuClick(item), class: "nav-link" }, item.link.title))))),
                        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" }))))));
        }
    }
    static get is() { return "ema-app-drupal"; }
    static get properties() { return {
        "authenticated": {
            "state": true
        },
        "configJson": {
            "type": "Any",
            "attr": "config-json"
        },
        "currentNid": {
            "state": true
        },
        "currentNode": {
            "state": true
        },
        "drupalHost": {
            "type": String,
            "attr": "drupal-host"
        },
        "el": {
            "elementRef": true
        },
        "loading": {
            "state": true
        },
        "model": {
            "state": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-drupal:**/"; }
}
