import { FC, useEffect } from "react";
import useCardsTableColumns from "./columns.tsx";
import { CardSummary } from "../../../../../../../client";
import { BaseTable } from "../../../../../../../components/BaseTable/BaseTable.tsx";
import { usePrefillCardContext } from "../../../../../contexts/PrefillCardContext.tsx";

type Props = {
    items: CardSummary[];
};

const CardsTable: FC<Props> = ({ items }) => {
    const { selectPrefillCard } = usePrefillCardContext();
    const columns = useCardsTableColumns();
    const defaultSorting = [{ id: "createdAt", desc: false }];

    useEffect(() => {
        if (items.length < 1) return;
        selectPrefillCard(items[0].id);
    }, []);

    return (
        <BaseTable
            data={items}
            columns={columns}

            restProps={
                {
                    enableSorting: true,
                    enableColumnActions: false,
                    enablePagination: true,
                    enableBottomToolbar: true,
                    paginationDisplayMode: "pages",
                    initialState: {
                        sorting: defaultSorting,
                    },
                    mantinePaginationProps: {
                        showRowsPerPage: false,
                    },
                    enableStickyHeader: true,
                    enableStickyFooter: true,
                    mantineTableContainerProps: { style: { maxHeight: "81vh", height: "81vh" } },
                }
            }
        />
    );
};

export default CardsTable;
