'use strict';

var index = require('./index-BjHIBY-I.js');
var dispatchResizeEvent = require('./dispatch-resize-event-DH5CaB3p.js');

const tabPanelCss = () => `:host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}`;

const TabPanel = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.changeTab = index.createEvent(this, "changeTab");
        /**
         * The tabs to display in the panel
         */
        this.tabs = [];
        this.slotElements = [];
        this.handleChangeTabs = this.handleChangeTabs.bind(this);
        this.setSlotElements = this.setSlotElements.bind(this);
        this.setTabStatus = this.setTabStatus.bind(this);
    }
    connectedCallback() {
        this.initialize();
    }
    componentDidLoad() {
        this.initialize();
    }
    initialize() {
        const slot = this.getSlot();
        if (!slot) {
            return;
        }
        slot.addEventListener('slotchange', this.setSlotElements);
        this.setSlotElements();
        // eslint-disable-next-line unicorn/no-array-for-each
        this.tabs.forEach(this.setTabStatus);
    }
    disconnectedCallback() {
        const slot = this.getSlot();
        slot.removeEventListener('slotchange', this.setSlotElements);
    }
    tabsChanged() {
        this.hidePanels();
        // eslint-disable-next-line unicorn/no-array-for-each
        this.tabs.forEach(this.setTabStatus);
    }
    render() {
        return (index.h(index.Host, { key: '72cfa3773a3e1a963d2212dbab203d85a9b0a0c6', onChangeTab: this.handleChangeTabs }, index.h("div", { key: '1faa5cd3c361acce5141a27791fb0fb401dab968', class: "tab-panel" }, index.h("limel-tab-bar", { key: 'c7b9cef34448d5e96d3ddb851a0e2bdca876ee80', tabs: this.tabs }), index.h("div", { key: 'b1cba255e44496a03f7bffcea062e0686b2725f2', class: "tab-content" }, index.h("slot", { key: '44152fc36221478d7d8656a8e199e36044584283' })))));
    }
    setSlotElements() {
        const slot = this.getSlot();
        this.hidePanels();
        this.slotElements = Array.prototype.slice.call(slot.assignedElements());
        // eslint-disable-next-line unicorn/no-array-for-each
        this.tabs.forEach(this.setTabStatus);
    }
    setTabStatus(tab) {
        const element = this.slotElements.find((e) => e.id === tab.id);
        if (!element) {
            return;
        }
        if (tab.active) {
            element.style.display = '';
        }
        else {
            element.style.display = 'none';
        }
        element['tab'] = tab;
    }
    handleChangeTabs(event) {
        this.tabs = this.tabs.map((tab) => {
            if (tab.id === event.detail.id) {
                return event.detail;
            }
            return tab;
        });
        this.setTabStatus(event.detail);
        // Content inside the newly activated tab may need to redraw once
        // visible, so we use the resize event trick. /Ads
        setTimeout(dispatchResizeEvent.dispatchResizeEvent);
    }
    getSlot() {
        return this.host.shadowRoot.querySelector('slot');
    }
    hidePanels() {
        for (const element of this.slotElements) {
            element.style.display = 'none';
        }
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "tabs": [{
                "tabsChanged": 0
            }]
    }; }
};
TabPanel.style = tabPanelCss();

exports.limel_tab_panel = TabPanel;
