import {i18n} from './i18n.js';
import {css, html, LitElement} from 'lit-element';
import VPULitElement from 'vpu-common/vpu-lit-element';
import './person-profile.js';
import * as commonUtils from 'vpu-common/utils';
import bulmaCSSPath from "bulma/css/bulma.min.css";
import {getAssetURL} from "./utils";
import $ from 'jquery';
import 'vpu-person-select';

class PersonProfileDemo extends VPULitElement {
    constructor() {
        super();
        this.lang = 'de';
        this.person = '';
        this.selectedPerson = '';
        this.noAuth = false;
    }

    static get properties() {
        return {
            lang: { type: String },
            person: { type: String, attribute: false },
            selectedPerson: { type: String, attribute: false },
            noAuth: { type: Boolean, attribute: 'no-auth' },
        };
    }

    connectedCallback() {
        super.connectedCallback();
        i18n.changeLanguage(this.lang);
        const that = this;

        this.updateComplete.then(()=>{
            window.addEventListener("vpu-auth-person-init", () => {
                that.person = window.VPUPersonId;
            });

            const personSelect = that._('vpu-person-select');
            personSelect.onchange = function () {
                that.selectedPerson = $(this).data("object").identifier;
            };

        });
    }

    static get styles() {
        // language=css
        return css`
            h1.title {margin-bottom: 1em;}
            div.container {margin-bottom: 1.5em;}
        `;
    }

    getAuthComponentHtml() {
        return this.noAuth ? html`` : html`
            <header>
                <div class="container">
                    <vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person remember-login style="float:right"></vpu-auth>
                </div>
            </header>
        `;
    }

    render() {
        const bulmaCSS = getAssetURL(bulmaCSSPath);
        return html`
            <link rel="stylesheet" href="${bulmaCSS}">

            ${this.getAuthComponentHtml()}

            <section class="section">
                <div class="container">
                    <h1 class="title">Person-Profile-Demo</h1>
                </div>
                <div class="container">
                    <vpu-person-profile lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}" value="${this.person}"></vpu-person-profile>
                </div>
            </section>
            <section class="section">
                <div class="container">
                    <h1 class="title">Select-Profile-Demo</h1>
                </div>
                <div class="container">
                    <div class="control">
                        <vpu-person-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}"></vpu-person-select>
                    </div>
                    <vpu-person-profile lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}" value="${this.selectedPerson}"></vpu-person-profile>
                </div>
            </section>
        `;
    }
}

commonUtils.defineCustomElement('vpu-person-profile-demo', PersonProfileDemo);