import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useCallback, useRef } from "react";
import { Fragment } from "react/jsx-runtime";
import { columnsByTableName } from "../constants/columns.js";
import { tableLabels } from "../constants/names.js";
import { defaultColumnCountByTableWidth } from "../constants/table.js";
import { useEditorContext } from "../context/editor-context.js";
import { useColumnPriority } from "../hooks/useColumnPriority.js";
import { useTableHeight } from "../hooks/useTableHeight.js";
import { handleTableDatum } from "../utils/table.js";
import { TableBase } from "./table-base.js";
import { ItemNumberCell, MoreDetailsCell, RWATableCell } from "./table-cell.js";
import { RWATableRow } from "./table-row.js";
export function Table(props) {
    const { tableName, tableData, columnCountByTableWidth = defaultColumnCountByTableWidth, sortHandler, specialFirstRow, specialLastRow, } = props;
    const columns = columnsByTableName[tableName];
    const { operation, selectedTableItem, isAllowedToCreateDocuments, createItem, } = useEditorContext();
    const tableContainerRef = useRef(null);
    const rowRefs = useRef([]);
    const headerRef = useRef(null);
    const columnsToShow = useColumnPriority({
        columns,
        columnCountByTableWidth,
        tableContainerRef,
    });
    const maxHeight = useTableHeight({
        tableContainerRef,
        rowRefs,
        headerRef,
        selectedItemNumber: selectedTableItem?.itemNumber,
        hasSpecialLastRow: !!specialLastRow,
    });
    const tableLabel = tableLabels[tableName];
    const onCreateItemClick = useCallback(() => {
        createItem(tableName);
    }, [createItem, tableName]);
    const renderRow = useCallback((tableItem, columns, index) => {
        const isSelected = selectedTableItem?.id === tableItem.id;
        return (_jsx(RWATableRow, { 
            /* @ts-expect-error - Ref is not typed */
            ref: (el) => (rowRefs.current[index] = el), children: columns.map((column) => (_jsxs(Fragment, { children: [column.key === "itemNumber" && (_jsx(ItemNumberCell, { itemNumber: tableItem.itemNumber })), column.key !== "itemNumber" && column.key !== "moreDetails" && (_jsx(RWATableCell, { className: column.isNumberColumn ? "text-right" : "", children: handleTableDatum(tableItem[column.key], column.decimalScale, column.displayTime) }, column.key)), column.key === "moreDetails" && (_jsx(MoreDetailsCell, { isSelected: isSelected, tableItem: tableItem, tableName: tableName }))] }, column.key))) }, tableItem.id));
    }, [selectedTableItem?.id, tableName]);
    return (_jsxs(_Fragment, { children: [_jsx(TableBase, { columns: columnsToShow, hasSelectedItem: !!selectedTableItem, headerRef: headerRef, maxHeight: maxHeight, onClickSort: sortHandler, ref: tableContainerRef, renderRow: renderRow, specialFirstRow: specialFirstRow, specialLastRow: specialLastRow, tableData: tableData }), isAllowedToCreateDocuments && !operation ? (_jsxs("button", { className: "mt-4 flex h-11 w-full items-center justify-center gap-x-2 rounded-lg border border-gray-300 bg-white text-sm font-semibold text-gray-900", onClick: onCreateItemClick, children: [_jsxs("span", { children: ["Create ", tableLabel] }), _jsx(Icon, { name: "Plus", size: 14 })] })) : null] }));
}
//# sourceMappingURL=table.js.map