import { h } from "@stencil/core";
import { MDCTabBar } from '@material/tab-bar';
import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
// TODO sticky mdc focus workaround https://github.com/prateekbh/preact-material-components/issues/625
export class PiePreviewLayout {
    constructor() {
        this.activeIndex = 0;
    }
    watchActiveIndex(newVal) {
        if (newVal === 1) {
            this.previewElement.style.display = 'block';
            this.designElement.style.display = 'none';
        }
        else {
            this.previewElement.style.display = 'none';
            this.designElement.style.display = 'block';
        }
    }
    componentDidLoad() {
        this.tabBar = new MDCTabBar(this.tabElement);
        this.tabBar.useAutomaticActivation;
        this.tabBar.focusOnActivate = false;
        this.tabElement.addEventListener('MDCTabBar:activated', this.handleActivated.bind(this));
        this.designElement.addEventListener(ModelUpdatedEvent.TYPE, this.handleModelUpdated.bind(this));
    }
    handleActivated(ev) {
        this.activeIndex = ev.detail.index;
    }
    async handleModelUpdated(ev) {
        const { reset, update } = ev.detail;
        reset === true; // TODO - not sure what reset true does
        await this.piePlayerElement.updateElementModel(update);
    }
    render() {
        return (h("div", { class: "author-preview-container" },
            h("div", { ref: (el) => this.tabElement = el, class: "mdc-tab-bar author-preview-tab-bar", role: "tablist" },
                h("div", { class: "mdc-tab-scroller" },
                    h("div", { class: "mdc-tab-scroller__scroll-area" },
                        h("div", { class: "mdc-tab-scroller__scroll-content" },
                            h("button", { class: "mdc-tab mdc-tab--active", role: "tab", "aria-selected": "true", tabindex: "0", type: "button" },
                                h("span", { class: "mdc-tab__content" },
                                    h("span", { class: "mdc-tab__text-label" }, "Build")),
                                h("span", { class: "mdc-tab-indicator mdc-tab-indicator--active" },
                                    h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })),
                                h("span", { class: "mdc-tab__ripple" })),
                            h("button", { class: "mdc-tab", role: "tab", "aria-selected": "true", tabindex: "1", type: "button" },
                                h("span", { class: "mdc-tab__content" },
                                    h("span", { class: "mdc-tab__text-label" }, "Item Preview")),
                                h("span", { class: "mdc-tab-indicator" },
                                    h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })),
                                h("span", { class: "mdc-tab__ripple" })))))),
            h("div", { class: "author-preview-tab-contents" },
                h("div", { ref: (el) => this.designElement = el },
                    h("slot", { name: 'configure' })),
                h("div", { style: { display: 'none' }, ref: (el) => this.previewElement = el },
                    h("div", { class: "preview-control" },
                        h("pie-preview-control", { onEnvChanged: (ev) => {
                                this.piePlayerElement.env = { mode: ev.detail.mode, role: ev.detail.role };
                            } })),
                    h("div", { class: "pie-player" },
                        h("pie-player", { ref: (el) => this.piePlayerElement = el, disableBundler: true, config: this.config }))))));
    }
    static get is() { return "pie-preview-layout"; }
    static get originalStyleUrls() { return {
        "$": ["pie-preview-layout.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["pie-preview-layout.css"]
    }; }
    static get properties() { return {
        "config": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Object",
                "resolved": "Object",
                "references": {
                    "Object": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "activeIndex": {}
    }; }
    static get watchers() { return [{
            "propName": "activeIndex",
            "methodName": "watchActiveIndex"
        }]; }
}
