import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Pagination, usePagination } from "@powerhousedao/design-system";
import { useEditorContext } from "../context/editor-context.js";
import { useTableData } from "../hooks/useTableData.js";
import { ItemDetails } from "./item-details.js";
import { Table } from "./table.js";
export function TableWithForm(props) {
    const { tableName, specialFirstRow, specialLastRow } = props;
    const { getIsFormOpen } = useEditorContext();
    const showForm = getIsFormOpen(tableName);
    const { tableData, sortHandler } = useTableData(tableName);
    const shouldPaginate = tableData.length > 20;
    const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable, } = usePagination(tableData);
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-2 flex w-full justify-end", children: shouldPaginate ? (_jsx(Pagination, { goToFirstPage: goToFirstPage, goToLastPage: goToLastPage, goToNextPage: goToNextPage, goToPage: goToPage, goToPreviousPage: goToPreviousPage, hiddenNextPages: hiddenNextPages, isNextPageAvailable: isNextPageAvailable, isPreviousPageAvailable: isPreviousPageAvailable, nextPageLabel: "Next", pages: pages, previousPageLabel: "Previous" })) : null }), _jsx(Table, { sortHandler: sortHandler, specialFirstRow: specialFirstRow, specialLastRow: specialLastRow, tableData: pageItems, tableName: tableName }), showForm ? (_jsx("div", { className: "mt-4 rounded-md bg-white", children: _jsx(ItemDetails, { tableName: tableName }) })) : null] }));
}
//# sourceMappingURL=table-with-form.js.map