import { Host, h } from "@stencil/core";
export class PdsTable {
    constructor() {
        this.compact = undefined;
        this.componentId = undefined;
        this.responsive = undefined;
        this.fixedColumn = undefined;
        this.selectable = undefined;
        this.sortingColumn = null;
        this.sortingDirection = 'asc';
    }
    componentWillLoad() {
        this.sortingColumn = null;
    }
    classNames() {
        const classNames = ['pds-table'];
        if (this.compact) {
            classNames.push('is-compact');
        }
        if (this.responsive) {
            classNames.push('is-responsive');
        }
        return classNames.join('  ');
    }
    sortTable(column, direction) {
        const tableBody = this.el.querySelector('pds-table-body');
        // Get the rows in the table body
        const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));
        // Find the column index based on the column name
        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
        const columnHeaderCell = columnHeaderCells.find((cell) => cell.innerText.trim() === column);
        if (!columnHeaderCell) {
            console.warn(`Column "${column}" not found.`);
            return;
        }
        const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);
        // Sort the rows based on the content of the specified column
        tableRows.sort((a, b) => {
            const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
            const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
            if (direction === 'asc') {
                return valueA.localeCompare(valueB);
            }
            else {
                return valueB.localeCompare(valueA);
            }
        });
        // Clear and append the sorted rows back to the table body
        tableBody.innerHTML = '';
        tableRows.forEach((row) => {
            tableBody.appendChild(row);
        });
    }
    handleTableSort(event) {
        const { direction } = event.detail;
        this.sortTable(event.detail.column, direction);
        this.sortingColumn = event.detail.column;
        this.sortingDirection = direction;
    }
    render() {
        return (h(Host, { key: 'a2c7913248cd3d9f73503bde080e8c88aa1a5a71', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable }, h("slot", { key: '94e51585d1c5c868896452a79b972c8ee8e27483' })));
    }
    static get is() { return "pds-table"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-table.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-table.css"]
        };
    }
    static get properties() {
        return {
            "compact": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines if table displays compact which reduces the spacing of table cells."
                },
                "attribute": "compact",
                "reflect": false
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the table `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "responsive": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Enables the table to be responsive by horizontally scrolling on smaller screens."
                },
                "attribute": "responsive",
                "reflect": false
            },
            "fixedColumn": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines if table displays fixed column which fixes the first column of the table."
                },
                "attribute": "fixed-column",
                "reflect": false
            },
            "selectable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines if table displays checkboxes for selectable rows."
                },
                "attribute": "selectable",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "sortingColumn": {},
            "sortingDirection": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "pdsTableSort",
                "method": "handleTableSort",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pds-table.js.map
