import { Host, h } from "@stencil/core";
export class SpwTableSidebar {
    constructor() {
        /** Si true, la sidebar est dépliée par défaut */
        this.defaultExpanded = true;
        /** Permet de définir un titre à la sidebar */
        this.sidebarTitle = 'Filtres';
        /** Permet de définir une icône à côté du titre de la sidebar (référence font-awesome) */
        this.sidebarIcon = 'fa-filter';
        /** Permet de définir une largeur en px pour la sidebar dépliée */
        this.sidebarWidth = 260;
        /** Si true, affiche une icône de reset à côté du titre */
        this.hasReset = true;
        /** Icône à utiliser pour le bouton de reset (référence font-awesome) */
        this.resetIcon = 'fa-arrow-rotate-left';
        this.toggleSidebar = () => {
            this.expanded = !this.expanded;
        };
        this.handleReset = (event) => {
            event.stopPropagation();
            this.sidebarReset.emit();
        };
    }
    componentWillLoad() {
        this.expanded = this.defaultExpanded;
    }
    componentDidLoad() {
        setTimeout(() => {
            this.observeTableHeight();
        }, 0);
    }
    disconnectedCallback() {
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
        }
        if (this.mutationObserver) {
            this.mutationObserver.disconnect();
        }
        if (this.debounceTimer) {
            clearTimeout(this.debounceTimer);
        }
    }
    calculateTotalHeight() {
        const spwTable = this.findSpwTable();
        if (!spwTable)
            return 0;
        const shadowRoot = spwTable.shadowRoot;
        if (!shadowRoot)
            return spwTable.offsetHeight;
        const tableContainer = shadowRoot.querySelector('.spw-table-container');
        let totalHeight = tableContainer ? tableContainer.offsetHeight : 0;
        const resizeHandle = shadowRoot.querySelector('.spw-table-resize-handle');
        if (resizeHandle) {
            totalHeight += resizeHandle.offsetHeight;
        }
        const footerSlot = spwTable.querySelector('[slot="table-footer"]');
        if (footerSlot && footerSlot instanceof HTMLElement) {
            totalHeight += footerSlot.offsetHeight;
        }
        return totalHeight;
    }
    observeTableHeight() {
        const spwTable = this.findSpwTable();
        if (!spwTable) {
            return;
        }
        const updateFullHeight = () => {
            const height = this.calculateTotalHeight();
            if (height > 0) {
                this.observedHeight = height;
            }
        };
        this.resizeObserver = new ResizeObserver(() => {
            updateFullHeight();
        });
        this.resizeObserver.observe(spwTable);
        this.mutationObserver = new MutationObserver(_ => {
            if (this.debounceTimer) {
                clearTimeout(this.debounceTimer);
            }
            this.debounceTimer = setTimeout(() => {
                updateFullHeight();
            }, 50);
        });
        this.mutationObserver.observe(spwTable, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'class'],
        });
        if (spwTable.shadowRoot) {
            const shadowObserver = new MutationObserver(() => {
                updateFullHeight();
            });
            shadowObserver.observe(spwTable.shadowRoot, {
                childList: true,
                subtree: true,
                attributes: true,
            });
        }
        updateFullHeight();
    }
    findSpwTable() {
        const spwTableContainer = this.el.parentElement;
        if (!spwTableContainer || spwTableContainer.tagName.toLowerCase() !== 'spw-table-container') {
            return null;
        }
        const spwTable = spwTableContainer.querySelector('spw-table');
        return spwTable;
    }
    get hostClass() {
        return {
            '--expanded': this.expanded,
            '--collapsed': !this.expanded,
        };
    }
    get elementClass() {
        return {
            'spw-table-sidebar': true,
            'spw-table-sidebar--expanded': this.expanded,
            'spw-table-sidebar--collapsed': !this.expanded,
        };
    }
    render() {
        const style = Object.assign(Object.assign({}, (this.observedHeight !== undefined && { height: `${this.observedHeight}px` })), { '--spw-table-sidebar-width': `${this.sidebarWidth}px` });
        return (h(Host, { key: 'b8b4b59f8ddff138601e3723ab3b96919807bb8c', style: style, class: this.hostClass }, h("nav", { key: '069e5baf3dce00f9c45c7943f8f6e588e79c3fe6', class: this.elementClass }, h("span", { key: '5229c33d65e6bc1c08e4d1e3b0f8afc6d24a7431', class: "spw-table-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: 'a50c05d8561210ef66026395e26e3cbaa506e77e', icon: "fa-chevron-left" })), h("div", { key: 'efb6cae5e348f52f026db07f6381d1f8785e85af', class: "spw-table-sidebar__mini", onClick: this.toggleSidebar }, h("spw-icon", { key: '3cea2ba602cc1757f4abcbfc2628ad19f521d4dd', icon: this.sidebarIcon, variant: "fa-regular" })), h("div", { key: '23dccad9d9cf67ad86580fa1b9cb1b52e004be20', class: "spw-table-sidebar__content" }, h("div", { key: 'aba8097d393fc7cefce1bcf1666403104a6b67c5', class: "spw-table-sidebar__header" }, h("span", { key: 'b5e89956cc8d101c938073d311ba2bd742b8dde8', class: "spw-table-sidebar__header-title" }, h("spw-icon", { key: '3277432f0fac70bd812714423c880c43026c19fd', icon: this.sidebarIcon, variant: "fa-regular" }), " ", this.sidebarTitle), this.hasReset && (h("spw-button", { key: '2244b989d733aa649d7d74d26fd548338c365d28', class: "spw-table-sidebar__header-reset", onClick: this.handleReset, type: "button", variant: "secondary", size: "small", isIconOnly: true, icon: this.resetIcon }))), h("div", { key: 'cac5fd1d25cc788ebb52997b2c244f554b8ed1aa', class: "spw-table-sidebar__scrollable-content" }, h("slot", { key: 'cad3dfe8b3fe8d41286d0891b7a8a3fe233def05' })), h("div", { key: 'ca8b941d16b2725f53dfb7099f40fda72a7901b6', class: "spw-table-sidebar__footer" }, h("slot", { key: 'd7dba20a95384af715ef218ceba8b77bd5f86d84', name: "sidebar-footer" }))))));
    }
    static get is() { return "spw-table-sidebar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-table-sidebar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-table-sidebar.css"]
        };
    }
    static get properties() {
        return {
            "defaultExpanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Si true, la sidebar est d\u00E9pli\u00E9e par d\u00E9faut"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-expanded",
                "defaultValue": "true"
            },
            "sidebarTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Permet de d\u00E9finir un titre \u00E0 la sidebar"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sidebar-title",
                "defaultValue": "'Filtres'"
            },
            "sidebarIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Permet de d\u00E9finir une ic\u00F4ne \u00E0 c\u00F4t\u00E9 du titre de la sidebar (r\u00E9f\u00E9rence font-awesome)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sidebar-icon",
                "defaultValue": "'fa-filter'"
            },
            "sidebarWidth": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Permet de d\u00E9finir une largeur en px pour la sidebar d\u00E9pli\u00E9e"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sidebar-width",
                "defaultValue": "260"
            },
            "hasReset": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Si true, affiche une ic\u00F4ne de reset \u00E0 c\u00F4t\u00E9 du titre"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-reset",
                "defaultValue": "true"
            },
            "resetIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Ic\u00F4ne \u00E0 utiliser pour le bouton de reset (r\u00E9f\u00E9rence font-awesome)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "reset-icon",
                "defaultValue": "'fa-arrow-rotate-left'"
            }
        };
    }
    static get states() {
        return {
            "observedHeight": {},
            "expanded": {}
        };
    }
    static get events() {
        return [{
                "method": "sidebarReset",
                "name": "sidebarReset",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u00C9v\u00E9nement \u00E9mis lorsque l'ic\u00F4ne de reset est cliqu\u00E9e"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
