import React, { useEffect, useState } from 'react';
import { GridTable } from '@theorchard/suite-components';
import { Illustration } from '@theorchard/suite-icons';
import { DEFAULT_ITEMS_PER_PAGE } from 'src/constants';
import type { GetHistoricalContractAdvancesQuery } from 'src/apollo/queries/contract-advance/__generated__/get-historical-contract-advances';
import type { ContractAdvanceRequestParams } from 'src/types/abacus-contract-advance';
import HistoricalContractAdvanceListTableColumns from 'src/components/contract-advance-list/historical-contract-advance-list-table-columns';

interface HistoricalContractAdvanceListProps {
    historicalAdvances?: GetHistoricalContractAdvancesQuery;
    historicalAdvancesLoading: boolean;
    historicalAdvancesRequestParams: ContractAdvanceRequestParams;
    setHistoricalAdvancesRequestParams: (
        params: ContractAdvanceRequestParams
    ) => void;
}

const HistoricalContractAdvanceList: React.FC<
    HistoricalContractAdvanceListProps
> = ({
    historicalAdvances,
    historicalAdvancesLoading,
    historicalAdvancesRequestParams,
    setHistoricalAdvancesRequestParams,
}) => {
    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);

    useEffect(() => {
        setHistoricalAdvancesRequestParams({
            ...historicalAdvancesRequestParams,
            limit: pageSize,
            offset: page * pageSize,
        });
    }, [page, pageSize]);

    const totalCount =
        historicalAdvances?.abacusContract?.historicalContractAdvances
            ?.totalCount || 0;
    const items =
        historicalAdvances?.abacusContract?.historicalContractAdvances?.items ||
        [];

    return (
        <GridTable
            stickyHeader
            bordered
            className="HistoricalContractAdvanceList-table"
            columnDefs={HistoricalContractAdvanceListTableColumns()}
            data={items}
            defaultColumnDefs={{
                headerTextWrap: 'nowrap',
            }}
            emptyStateIcon={<Illustration name="emptyState" />}
            emptyStateTitle="No historical advances found from Orchard Admin."
            loading={historicalAdvancesLoading}
            loadingRows={DEFAULT_ITEMS_PER_PAGE}
            maxHeight={500}
            page={page}
            pageSize={pageSize}
            paginated
            onPageChange={setPage}
            onPageSizeChange={setPageSize}
            rowKey="id"
            showUpdateIndicator
            totalCount={totalCount}
            variant="zebra"
        />
    );
};

export default HistoricalContractAdvanceList;