"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Table = ({ columns, data, className, striped, bordered, hover, compact, responsive, sortable, onSort, initialSortBy, initialSortDirection, loading, emptyMessage = 'No data available', rowKey, caption, onRowClick, }) => {
    const [sortBy, setSortBy] = (0, react_1.useState)(initialSortBy || '');
    const [sortDirection, setSortDirection] = (0, react_1.useState)(initialSortDirection || 'asc');
    const [sortedData, setSortedData] = (0, react_1.useState)(data);
    (0, react_1.useEffect)(() => {
        if (sortable && sortBy) {
            const sorted = [...data].sort((a, b) => {
                const aValue = a[sortBy];
                const bValue = b[sortBy];
                if (typeof aValue === 'string' && typeof bValue === 'string') {
                    return sortDirection === 'asc'
                        ? aValue.localeCompare(bValue)
                        : bValue.localeCompare(aValue);
                }
                return sortDirection === 'asc' ? aValue - bValue : bValue - aValue;
            });
            setSortedData(sorted);
        }
        else {
            setSortedData(data);
        }
    }, [data, sortBy, sortDirection, sortable]);
    const handleHeaderClick = (columnId) => {
        if (sortable && columns.find(col => col.id === columnId)?.sortable !== false) {
            if (sortBy === columnId) {
                const newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
                setSortDirection(newDirection);
                if (onSort)
                    onSort(columnId, newDirection);
            }
            else {
                setSortBy(columnId);
                setSortDirection('asc');
                if (onSort)
                    onSort(columnId, 'asc');
            }
        }
    };
    const getSortIcon = (columnId) => {
        if (!sortable || sortBy !== columnId) {
            return (0, jsx_runtime_1.jsx)("span", { className: "bf-table__sort-icon bf-table__sort-icon--default", children: "\u2195" });
        }
        return sortDirection === 'asc'
            ? (0, jsx_runtime_1.jsx)("span", { className: "bf-table__sort-icon bf-table__sort-icon--asc", children: "\u2191" })
            : (0, jsx_runtime_1.jsx)("span", { className: "bf-table__sort-icon bf-table__sort-icon--desc", children: "\u2193" });
    };
    const tableClasses = [
        'bf-table',
        striped ? 'bf-table--striped' : '',
        bordered ? 'bf-table--bordered' : '',
        hover ? 'bf-table--hover' : '',
        compact ? 'bf-table--compact' : '',
        responsive ? 'bf-table--responsive' : '',
        loading ? 'bf-table--loading' : '',
        className || '',
    ].filter(Boolean).join(' ');
    const renderRows = () => {
        if (loading) {
            return ((0, jsx_runtime_1.jsx)("tr", { className: "bf-table__loading-row", children: (0, jsx_runtime_1.jsxs)("td", { colSpan: columns.length, className: "bf-table__loading-cell", children: [(0, jsx_runtime_1.jsx)("div", { className: "bf-table__loading-spinner" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading..." })] }) }));
        }
        if (!sortedData.length) {
            return ((0, jsx_runtime_1.jsx)("tr", { className: "bf-table__empty-row", children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, className: "bf-table__empty-cell", children: emptyMessage }) }));
        }
        return sortedData.map((row, rowIndex) => {
            const key = rowKey ? row[rowKey] : rowIndex;
            return ((0, jsx_runtime_1.jsx)("tr", { className: "bf-table__row", onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, tabIndex: onRowClick ? 0 : undefined, children: columns.map((column) => {
                    const cellValue = row[column.id];
                    return ((0, jsx_runtime_1.jsx)("td", { className: `bf-table__cell ${column.className || ''}`, style: column.style, children: column.render ? column.render(cellValue, row, rowIndex) : cellValue }, column.id));
                }) }, key));
        });
    };
    const table = ((0, jsx_runtime_1.jsxs)("table", { className: tableClasses, children: [caption && (0, jsx_runtime_1.jsx)("caption", { className: "bf-table__caption", children: caption }), (0, jsx_runtime_1.jsx)("thead", { className: "bf-table__header", children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column) => {
                        const canSort = sortable && column.sortable !== false;
                        const headerClasses = [
                            'bf-table__header-cell',
                            canSort ? 'bf-table__header-cell--sortable' : '',
                            sortBy === column.id ? `bf-table__header-cell--sorted bf-table__header-cell--sorted-${sortDirection}` : '',
                            column.headerClassName || '',
                        ].filter(Boolean).join(' ');
                        const ariaSort = sortBy === column.id ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined;
                        return ((0, jsx_runtime_1.jsxs)("th", { className: headerClasses, style: column.headerStyle, onClick: canSort ? () => handleHeaderClick(column.id) : undefined, tabIndex: canSort ? 0 : undefined, ...(ariaSort ? { 'aria-sort': ariaSort } : {}), children: [column.header || column.id, canSort && getSortIcon(column.id)] }, column.id));
                    }) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: "bf-table__body", children: renderRows() })] }));
    if (responsive) {
        return (0, jsx_runtime_1.jsx)("div", { className: "bf-table-wrapper bf-table-wrapper--responsive", children: table });
    }
    return table;
};
exports.default = Table;
//# sourceMappingURL=Table.js.map