import { BaseWebcomponent } from '../../shared/base-webcomponent';
import { Api, configDefaults, ConfigService, Translate } from '../../lib/index';
// import { Api, configDefaults, ConfigService, Translate } from '@ema/js-base-library/dist/collection/index';
import { Uaas } from '../../index';
export class AppUaas extends BaseWebcomponent {
    constructor() {
        super();
        this.clientId = 'essent-be';
        this.jsonLoaded = false;
        this.data = { items: [] };
        this.authenticated = false;
        this.items = [];
        this.api = new Api();
        this.config = ConfigService.instance;
        this.config.setDefaults(configDefaults);
        this.translation = new Translate();
        this.translation.use('nl-NL');
        this.initUaas();
        console.log(this);
    }
    initUaas() {
        this.uaas = new Uaas();
        this.uaas.init(this.clientId, this.uaas.applications[this.clientId]);
        document.addEventListener('loginShouldOccur', (event) => this.login(event));
    }
    login(event) {
        this.uaas.login(event).then(() => this.authenticated = true);
    }
    render() {
        if (this.json) {
            this.data = JSON.parse(this.json);
        }
        if (this.jsonUrl && !this.jsonLoaded) {
            this.fetchJson(this.jsonUrl).then((res) => {
                this.items = res;
                this.jsonLoaded = true;
            });
        }
        console.log('render', this);
        return (h("div", { class: 'container' }, this.uaas &&
            h("div", null,
                h("h1", { class: 'text-center' },
                    h("ion-icon", { name: "globe", size: "large" })),
                !this.authenticated &&
                    h("ema-card", null,
                        h("ema-card-header", null,
                            h("span", { class: "ema-card-header-title" },
                                "Uaas: ",
                                this.uaas.id)),
                        h("ema-card-content", null,
                            h("ema-login-form", { usernameLabel: this.translation.get('NAME'), passwordLabel: this.translation.get('PASSWORD'), submitLabel: this.translation.get('LOGIN'), "forgot-password-url": "/forgotPassword" }))),
                h("br", null),
                this.authenticated &&
                    h("ema-collapsible", { label: 'Uaas ' + this.clientId + ': config', collapsed: "false" },
                        h("ema-json-viewer", { json: JSON.stringify(this.uaas.config) })),
                h("ema-iframe", { src: 'https://bob-stoute.firebaseapp.com', fullscreen: false, fullscreenMargins: '180px,0,180px,0' }))));
    }
    test() {
        setInterval(() => {
            this.data['@graph'][0].name = Math.random();
        }, 1000);
    }
    initDrupal() {
        // this.drupal = new Drupal(this.config);
        // this.drupal.init(this.config.get('drupal')).then((arg) => {
        //     console.log(this);
        // })
        // console.log(this);
    }
    static get is() { return "app-uaas"; }
    static get properties() { return {
        "authenticated": {
            "state": true
        },
        "clientId": {
            "type": String,
            "attr": "client-id"
        },
        "data": {
            "state": true
        },
        "json": {
            "type": String,
            "attr": "json"
        },
        "jsonLoaded": {
            "state": true
        },
        "jsonUrl": {
            "type": String,
            "attr": "json-url"
        }
    }; }
    static get style() { return "/**style-placeholder:app-uaas:**/"; }
}
//# sourceMappingURL=app-uaas.js.map