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;
    }
    handleTableSelectAll(event) {
        if (event.defaultPrevented)
            return;
        const pdsTableBody = this.el.querySelector('pds-table-body');
        const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));
        tableRows.forEach((row) => {
            row.isSelected = event.detail.isSelected;
        });
    }
    async handleTableSelect(event) {
        if (event.defaultPrevented)
            return;
        const allTableRows = this.el.querySelectorAll('pds-table-row');
        const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);
        const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);
        const pdsTableHead = this.el.querySelector('pds-table-head');
        if (!pdsTableHead)
            return;
        const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');
        headerCheckbox.checked = allSelectedRows;
        headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
    }
    render() {
        return (h(Host, { key: '95cc4db296681faa0fc046c9b1d6807d640b7730', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'ecc9bc0761409d5a2819a05d72290c294e27454f' })));
    }
    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 events() {
        return [{
                "method": "pdsTableSelect",
                "name": "pdsTableSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value."
                },
                "complexType": {
                    "original": "{ rowIndex: number; isSelected: boolean }",
                    "resolved": "{ rowIndex: number; isSelected: boolean; }",
                    "references": {}
                }
            }, {
                "method": "pdsTableSelectAll",
                "name": "pdsTableSelectAll",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event that is emitted when the select all checkbox is clicked, carrying the selected value."
                },
                "complexType": {
                    "original": "{ isSelected: boolean }",
                    "resolved": "{ isSelected: boolean; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "pdsTableSort",
                "method": "handleTableSort",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "pdsTableSelectAll",
                "method": "handleTableSelectAll",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "pdsTableRowSelected",
                "method": "handleTableSelect",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pds-table.js.map
