import { __decorate } from "tslib";
import { customElement, css, display, html, ref } from "@hpcc-js/wc-core";
import { DockPanel, Widget } from "@lumino/widgets";
import { MessageLoop } from "@lumino/messaging";
import { HPCCLuminoElement } from "./common";
import { dockpanel, dragdrop, splitpanel, tabbar, tabpanel, widget } from "./styles";
import { dockpanel as dockpanelTheme, tabbar as tabbarTheme } from "./theme";
const template = html `\
<div ${ref("_div")}>
</div>
<slot ${ref("_slot")}></slot>`;
const styles = css `
${display("inline-block")} 

:host > slot {
    visibility: hidden;
}

${dragdrop}
${widget}
${splitpanel}
${tabbar}
${tabpanel}
${dockpanel}

${dockpanelTheme}
${tabbarTheme}

.hpcc-LuminoAdapter {
    padding: 8px;
    border: 1px solid #c0c0c0;
    border-top: none;
}
`;
let HPCCDockPanelElement = class HPCCDockPanelElement extends HPCCLuminoElement {
    constructor() {
        super();
    }
    createPanel() {
        this._dockPanel = new DockPanel({ document: this.shadowRoot });
    }
    addWidget(w, e, ref) {
        this._dockPanel.addWidget(w, {
            mode: e.dataset.mode,
            ref
        });
    }
    enter() {
        super.enter();
        Widget.attach(this._dockPanel, this._div);
        MessageLoop.installMessageHook(this._dockPanel, this);
    }
    update(changes) {
        super.update(changes);
        this._dockPanel.node.style.width = `${this.clientWidth}px`;
        this._dockPanel.node.style.height = `${this.clientHeight}px`;
        this._dockPanel.update();
    }
    exit() {
        Widget.detach(this._dockPanel);
        super.exit();
    }
    //  Lumino Messaging  ---
    messageHook(handler, msg) {
        if (handler === this._dockPanel) {
            switch (msg.type) {
                case "layout-modified":
                    this.$emit("layoutChanged", this);
                    break;
            }
        }
        return true;
    }
};
HPCCDockPanelElement = __decorate([
    customElement("hpcc-dockpanel", { template, styles })
], HPCCDockPanelElement);
export { HPCCDockPanelElement };
//# sourceMappingURL=dockPanel.js.map