import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useState } from "react";
import { twJoin, twMerge } from "tailwind-merge";
/**
 * Base table component
 *
 * @type TItem - Table item type, any record with an "id" field and any string keys
 * @type TableColumn - Specifies how to render a column. Must have a `key` which is a key of TItem, and a `label` which is the column header
 * @param tableData - Array of data to display, data must satisfy TItem
 * @param columns - Array of columns to display, column must satisfy TableColumn. The columns will be displayed in the order they are provided. Use the `useColumnPriority` hook to handle dropping columns for smaller screens.
 * @param children - Content to render above the table rows
 * @param footer - Content to render below the table rows
 * @param renderRow - Function to render a row, must return a React element
 * @param onClickSort - Function to handle sorting, called with key and direction
 * @param hasExpandedRow - Whether the table has an expanded row
 * @param specialFirstRow - Function to render a special first row (like the cash asset for instance), must return a React element
 */
export function TableBase(props) {
    const { children, ref, tableData, columns, footer, renderRow, onClickSort, specialFirstRow, specialLastRow, maxHeight, headerRef, hasSelectedItem, } = props;
    const [sortDirection, setSortDirection] = useState(null);
    const [sortKey, setSortKey] = useState(null);
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: twJoin("relative rounded-lg border border-gray-300 bg-white", hasSelectedItem ? "overflow-hidden" : "overflow-scroll"), ref: ref, style: { maxHeight }, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { className: "sticky top-0 isolate select-none text-nowrap border-b border-gray-300 bg-gray-100", ref: headerRef, children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { className: twMerge("group border-l border-gray-300 py-3 pl-3 text-start text-xs font-medium text-gray-600 first:border-l-0", column.allowSorting && "cursor-pointer hover:text-gray-900"), onClick: () => {
                                        if (!column.allowSorting)
                                            return;
                                        let sortDir = "asc";
                                        if (sortKey === column.key && sortDirection === "asc") {
                                            sortDir = "desc";
                                        }
                                        setSortDirection(sortDir);
                                        setSortKey(column.key);
                                        onClickSort(column.key, sortDir);
                                    }, children: _jsxs("div", { className: twMerge("group flex items-center", column.isNumberColumn && "justify-end"), children: [column.label, column.allowSorting ? (_jsx(Icon, { className: twMerge("invisible ml-1 rotate-90", sortKey === column.key && "group-hover:visible", sortDirection === "asc" && "rotate-[270deg]"), name: "ArrowFilledRight", size: 6 })) : null] }) }, column.key))) }) }), _jsxs("tbody", { children: [children, specialFirstRow?.(columns), tableData?.map((item, index) => renderRow(item, columns, index)), specialLastRow?.(columns)] })] }) }), footer] }));
}
//# sourceMappingURL=table-base.js.map