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

import './chunk-de721f0a.js';
import { f as ConfigService, k as Drupal } from './chunk-f9f1602a.js';

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]);
    }
    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).then((arg) => {
            this.getData().then(() => {
                this.authenticated = this.drupal.authenticated;
                this.model = this.drupal.model;
                this.loading = false;
                setTimeout((arg) => {
                    this.loginModal = document.getElementById('drupal-login-modal');
                    document.addEventListener('loginShouldOccur', (e) => {
                        this.login(e.detail.username, e.detail.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;
        });
    }
    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", { errorMessage: '' })),
                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"
        },
        "loading": {
            "state": true
        },
        "model": {
            "state": true
        }
    }; }
    static get style() { return ".ema-app-drupal #login-button,.ema-app-drupal #logout-button{position:fixed;top:.5rem;right:.5rem;z-index:11000}\@media screen and (max-width:767px){.ema-app-drupal #login-button,.ema-app-drupal #logout-button{right:4rem}}.ema-app-drupal ema-node .node{text-align:center;padding:1rem 0}.ema-app-drupal ema-node .node .field{margin-bottom:.5rem}"; }
}

class DrupalNode {
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        let bodyField = this.el.querySelector('.field--name-body');
        if (this.data.attributes.body) {
            bodyField.innerHTML = this.data.attributes.body.value;
        }
        else {
            bodyField.innerHTML = '';
        }
    }
    parseNode(node) {
        let type = node.type.split('--')[1];
        return node;
    }
    render() {
        let data;
        if (this.dataJson) {
            data = this.data = this.parseNode(JSON.parse(this.dataJson).data);
        }
        return (h("article", { id: 'node-' + data.attributes.nid, class: 'node node--type-' + data.type.split('--')[1] + ' node--view-mode-full clearfix' },
            h("header", null,
                h("h2", { class: "title node__title" }, data.attributes.title)),
            h("div", { class: "node__content clearfix" },
                h("div", { class: "field field--name-body" }),
                data.attributes.field_iframe &&
                    h("div", { class: "field field--name-iframe" },
                        h("ema-iframe", { src: data.attributes.field_iframe.uri, width: data.attributes.field_width, height: data.attributes.field_height })))));
    }
    static get is() { return "ema-drupal-node"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        }
    }; }
    static get style() { return "ema-drupal-node .node .field{margin-bottom:var(--ema-padding-md,1rem)}"; }
}

export { AppDrupal as EmaAppDrupal, DrupalNode as EmaDrupalNode };
