/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { styles } from './nile-table.css';
import NileElement from '../internal/nile-element';
/**
 * Nile table component.
 *
 * @tag nile-table
 *
 */
let NileTable = class NileTable extends NileElement {
    constructor() {
        super(...arguments);
        this.rows = [];
        this.primaryRowWidths = [];
        /* #endregion */
    }
    /**
     * The styles for nile-table
     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
     */
    static get styles() {
        return [styles];
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('nile-body-load', this.handleRows);
    }
    firstUpdated(_changedProperties) {
        this.updateComplete.then(() => {
            this.handleResizeObserver();
        });
    }
    /* #endregion */
    /* #region Methods */
    /**
     * Render method
     * @slot This is a slot test
     */
    render() {
        return html `
			<slot @slotchange="${this.repaintTable}"></slot>
			`;
    }
    repaintTable() {
        this.realignStructure();
        this.handleBodyCssUpdate();
    }
    handleRows(e) {
        this.rows = [...this.rows, e.detail.comp];
    }
    handleBodyCssUpdate() {
        if (this.rows.length < 2)
            return;
        const tableBodies = this.rows;
        const firstEl = tableBodies[0].shadowRoot?.querySelector('div.base');
        if (firstEl) {
            firstEl.style.borderTopRightRadius = "var(--nile-radius-radius-xl)";
            firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
            firstEl.style.borderBottomRightRadius = "0px";
            firstEl.style.borderBottomLeftRadius = '0px';
            firstEl.style.borderBottom = 'none';
        }
        tableBodies.forEach((tb, i) => {
            if (i > 0 && i < tableBodies.length - 1) {
                const el = tb.shadowRoot?.querySelector('div.base');
                if (el) {
                    el.style.borderTopRightRadius = "0px";
                    el.style.borderTopLeftRadius = "0px";
                    el.style.borderBottomRightRadius = "0px";
                    el.style.borderBottomLeftRadius = "0px";
                    el.style.borderBottom = 'none';
                }
            }
        });
        const lastEl = tableBodies[tableBodies.length - 1].shadowRoot?.querySelector('div.base');
        if (lastEl) {
            lastEl.style.borderTopRightRadius = "0px";
            lastEl.style.borderTopLeftRadius = '0px';
            lastEl.style.borderBottomRightRadius = "var(--nile-radius-radius-xl)";
            lastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';
        }
    }
    getPrimaryColumnWidths() {
        const primaryTb = this.rows.find(tb => tb.type == 'primary');
        const widthArray = this.getTableCellFetchQuery(primaryTb).map((e) => e.clientWidth);
        return widthArray;
    }
    realignStructure() {
        if (this.rows.length < 2)
            return;
        const primaryRowWidths = this.getPrimaryColumnWidths();
        const secondaryRows = this.rows.filter(tb => tb.type != 'primary');
        secondaryRows.forEach((row) => {
            let elements = this.getTableCellFetchQuery(row);
            elements?.forEach((el, ind) => {
                el.style.setProperty('--cell-width', primaryRowWidths.at(ind) + 'px');
            });
        });
    }
    getTableCellFetchQuery(row) {
        return row?.shadowRoot?.
            querySelector('slot:not([name])')?.
            assignedElements()[0]
            .shadowRoot?.querySelector('slot')?.
            assignedElements();
    }
    handleResizeObserver() {
        const onResize = (entries) => {
            for (let entry of entries) {
                if (this.debounceTimeout) {
                    clearTimeout(this.debounceTimeout);
                }
                this.debounceTimeout = setTimeout(() => {
                    this.realignStructure();
                    this.debounceTimeout = null;
                }, 50);
            }
        };
        this.resizeObserver = new ResizeObserver(onResize);
        this.resizeObserver.observe(this);
    }
    disconnectedCallback() {
        this.resizeObserver.disconnect();
        super.disconnectedCallback();
    }
};
__decorate([
    query('slot')
], NileTable.prototype, "defaultSlot", void 0);
NileTable = __decorate([
    customElement('nile-table')
], NileTable);
export { NileTable };
export default NileTable;
//# sourceMappingURL=nile-table.js.map