/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <div id="title"></div>
    <slot id="body"></slot>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        display: flex;
        flex-direction: column;
        border-style: solid;
        border-width: var(--panel-border-width, 2px);
        border-color: var(--panel-border-color, #000000);
        border-radius: var(--panel-border-radius, 6px);
        overflow: hidden;
        user-select: none;
    }
    #title {
        display: flex;
        padding: 8px;
        color: var(--panel-header-text-color, #000000);
        background-color: var(--panel-header-back-color, #ffffff);
        background-image: var(--panel-header-image, none);
        border-bottom: solid var(--panel-border-width, 2px) var(--panel-border-color, #000000);
    }
    #body {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1;
        color: var(--panel-text-color, #000000);
        background-color: var(--panel-back-color, #ffffff);
        background-image: var(--panel-back-image, none);
        overflow-x: auto;
        overflow-y: auto;
    }
    
`);

/* ======================================================================= */

import CustomElement from "../element/CustomElement.js";

export default class CaptionPanel extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.shadowRoot.getElementById("title").addEventListener("click", () => {
            if (!!this.expanded && this.expanded != "false") {
                this.expanded = "false";
            } else {
                this.expanded = "true";
            }
        });
    }

    get caption() {
        return this.getAttribute("caption");
    }

    set caption(val) {
        this.setAttribute("caption", val);
    }

    static get observedAttributes() {
        return ["caption"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case "caption":
                if (oldValue != newValue) {
                    this.shadowRoot.getElementById("title").innerHTML = newValue;
                }
                break;
        }
    }

}

customElements.define("emc-captionpanel", CaptionPanel);
