import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Pagination, usePagination } from "@powerhousedao/design-system";
import { Combobox } from "@powerhousedao/design-system/connect";
import { useCallback, useEffect, useMemo, useState } from "react";
import { tableNames } from "../constants/names.js";
import { allGroupTransactionTypes, groupTransactionTypeLabels, } from "../constants/transactions.js";
import { useEditorContext } from "../context/editor-context.js";
import { useTableData } from "../hooks/useTableData.js";
import { makeFixedIncomeOptionLabel } from "../utils/form.js";
import { ItemDetails } from "./item-details.js";
import { Table } from "./table.js";
export function GroupTransactionsTable() {
    const tableName = tableNames.TRANSACTION;
    const { getIsFormOpen, fixedIncomes } = useEditorContext();
    const showForm = getIsFormOpen(tableName);
    const { tableData, sortHandler } = useTableData(tableName);
    const [filteredTableData, setFilteredTableData] = useState(tableData);
    const [filterAssetId, setFilterAssetId] = useState();
    const [filterTypes, setFilterTypes] = useState([]);
    const shouldPaginate = filteredTableData.length > 20;
    useEffect(() => {
        if (!filterAssetId && !filterTypes.length) {
            setFilteredTableData(tableData);
            return;
        }
        setFilteredTableData(tableData.filter((transaction) => {
            if (filterAssetId && filterTypes.length) {
                return (transaction.fixedIncomeTransaction?.assetId === filterAssetId &&
                    filterTypes.includes(transaction.type));
            }
            if (filterAssetId) {
                return transaction.fixedIncomeTransaction?.assetId === filterAssetId;
            }
            if (filterTypes.length) {
                return filterTypes.includes(transaction.type);
            }
        }));
    }, [filterAssetId, filterTypes, tableData]);
    const filterByAssetOptions = useMemo(() => fixedIncomes.map((asset) => ({
        label: makeFixedIncomeOptionLabel(asset),
        value: asset.id,
    })), [fixedIncomes]);
    const filterByTypeOptions = useMemo(() => allGroupTransactionTypes.map((type) => ({
        label: groupTransactionTypeLabels[type],
        value: type,
    })), []);
    const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable, } = usePagination(filteredTableData);
    const handleFilterByAssetChange = useCallback((update) => {
        if (!update || !(typeof update === "object") || !("value" in update)) {
            setFilterAssetId(undefined);
            return;
        }
        const { value: assetId } = update;
        setFilterAssetId(assetId);
    }, []);
    const handleFilterByTypeChange = useCallback((update) => {
        if (!update || !Array.isArray(update)) {
            setFilterTypes([]);
            return;
        }
        const _update = update;
        setFilterTypes(_update.map(({ value }) => value));
    }, []);
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex gap-2", children: [_jsx("div", { className: "min-w-72 max-w-96", children: _jsx(Combobox, { isClearable: true, onChange: handleFilterByAssetChange, options: filterByAssetOptions, placeholder: "Filter by Asset" }) }), _jsx("div", { className: "min-w-72 max-w-96", children: _jsx(Combobox, { isClearable: true, isMulti: true, onChange: handleFilterByTypeChange, options: filterByTypeOptions, placeholder: "Filter by Type" }) }), _jsx("div", { className: "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, tableData: pageItems, tableName: tableName }), showForm ? (_jsx("div", { className: "mt-4 rounded-md bg-white", children: _jsx(ItemDetails, { tableName: tableName }) })) : null] }));
}
//# sourceMappingURL=group-transactions-table.js.map