import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { Headers, Header, Item, Rows, Row, Wrapper, ProgressRow, } from "./styled";
import { useTheme } from "styled-components";
const Table = ({ header, rows, ...props }) => {
    const currentTheme = useTheme();
    const theme = props.theme
        ? { ...currentTheme.table, ...props.theme }
        : currentTheme.table;
    const handleRowClick = useCallback((event) => {
        // @ts-ignore
        const { rowid } = event.currentTarget.dataset;
        if (!rowid)
            return;
        props.onRowClick?.(rowid.toString());
    }, [props]);
    const handleRowEnter = useCallback((event) => {
        // @ts-ignore
        const { rowid } = event.currentTarget.dataset;
        props.onRowEnter?.(rowid?.toString());
    }, [props]);
    const handleRowLeave = useCallback((event) => {
        // @ts-ignore
        const { rowid } = event.currentTarget.dataset;
        props.onRowLeave?.(rowid?.toString());
    }, [props]);
    return (_jsxs(Wrapper, { className: `ui-table__wrapper ${props.className ?? ""}`, theme: theme, children: [_jsx("thead", { children: header && header.length > 0 && (_jsx(Headers, { className: "ui-table__headers", theme: theme, children: header.map((el, i) => (_jsx(Header, { className: "ui-table__header", theme: theme, colCount: header.length, children: el }, i))) })) }), _jsx(Rows, { className: "ui-table__rows", theme: theme, children: rows.map((row, i) => {
                    let vals;
                    let rowId = i;
                    let progressValue;
                    if (Array.isArray(row)) {
                        vals = row;
                    }
                    else {
                        const dataRow = Object.assign({}, row);
                        delete dataRow.id;
                        delete dataRow.progress;
                        vals = Object.values(dataRow);
                        rowId = row.id;
                        progressValue = row.progress;
                    }
                    return (_jsxs(Row, { "data-rowid": rowId, className: "ui-table__row", theme: theme, onMouseEnter: handleRowEnter, onMouseLeave: handleRowLeave, onClick: handleRowClick, children: [vals.map((item, j) => (_jsx(Item, { theme: theme, className: "ui-table__item", colCount: vals.length, 
                                // To be safe from potential regression
                                withProgress: typeof progressValue !== "undefined", children: item }, `${rowId}.${j}`))), typeof progressValue !== "undefined" && (_jsx(ProgressRow, { theme: theme, value: progressValue, className: "ui-table__progress" }))] }, rowId));
                }) })] }));
};
export default Object.assign(Table, {
    Wrapper,
    Header,
    Row,
    Headers,
    Item,
    Rows,
});
//# sourceMappingURL=index.js.map