import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { createContext, useContext, useMemo, useRef, useState, } from "react";
import { useOneUIConfig } from "../../context/OneUIProvider";
import Spacing from "../Spacing";
import UncontrolledTransition from "../UncontrolledTransition";
import Styles from "./Table.module.scss";
/**
 * A component that displays data in a table format with optional pagination.
 * It shows rows of information with customizable column headers and can handle
 * large datasets by splitting them across multiple pages.
 */
export default function Table({ paginable, heading, order, items, className = "", }) {
    const transitionRef = useRef(null);
    const [currPage, setCurrPage] = useState(0);
    const { NextPage, PrevPage } = useOneUIConfig("component.table.controls");
    const itemsToShow = useMemo(() => {
        if (paginable) {
            const from = currPage * paginable.pageSize;
            return items?.slice(from, from + paginable.pageSize) || [];
        }
        else {
            return items;
        }
    }, [items, currPage]);
    const { pages } = useMemo(() => {
        if (paginable) {
            const numPages = Math.ceil(paginable.totalItems / paginable.pageSize);
            return {
                pages: numPages,
            };
        }
        return {
            items: items,
        };
    }, [items, currPage, paginable?.totalItems]);
    const Wrapper = paginable ? UncontrolledTransition : "div";
    return (_jsxs(_Fragment, { children: [_jsx(TableContext.Provider, { value: {
                    itemsToShow,
                    keys: order,
                    heading,
                }, children: _jsx(Wrapper, { className: Styles.transitionContainer, ref: transitionRef, children: _jsx(TableComp, { className: className }, currPage) }) }), paginable && paginable.totalItems > paginable.pageSize ? (_jsxs(_Fragment, { children: [_jsx(Spacing, { size: "small" }), _jsxs("div", { className: Styles.footer, "data-testid": "controls", children: [_jsx("span", { className: Styles.iterable, onClick: () => {
                                    if (!(transitionRef.current instanceof HTMLDivElement))
                                        transitionRef.current.setOrientation("backward");
                                    paginable.togglePage(currPage - 1);
                                    setCurrPage(currPage - 1);
                                }, children: _jsx(PrevPage, { disabled: currPage === 0 }) }), _jsx("span", { className: Styles.paging, children: `${currPage + 1}/${pages}` }), _jsx("span", { className: Styles.iterable, onClick: () => {
                                    if (!(transitionRef.current instanceof HTMLDivElement))
                                        transitionRef.current.setOrientation("forward");
                                    paginable.togglePage(currPage + 1);
                                    setCurrPage(currPage + 1);
                                }, children: _jsx(NextPage, { disabled: currPage === pages - 1 }) })] })] })) : null] }));
}
const TableContext = createContext(null);
function TableComp({ className }) {
    const { itemsToShow, keys, heading } = useContext(TableContext);
    return (_jsxs("table", { className: `${Styles.container} ${className}`, children: [_jsx("thead", { children: _jsx("tr", { children: keys.map((key) => (_jsx("th", { children: heading[key] }, String(key)))) }) }), _jsx("tbody", { children: itemsToShow?.map((i, index) => (_jsx("tr", { className: i.className, children: keys.map((key) => (_jsx("td", { children: i[key] }, String(key)))) }, String(index)))) })] }));
}
//# sourceMappingURL=Table.js.map