import React, { useEffect, useState } from 'react';
import { GridTable } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import {
    DEFAULT_ITEMS_PER_PAGE,
    NO_PAID_ADVANCES,
    USER_FEATURES,
} from 'src/constants';
import {
    MILESTONES_MAP,
    MILESTONE_OPTIONS_MAP,
} from 'src/apollo/type-constants/advance';
import ContractAdvancePaidListTableColumns from 'src/components/contract-advance-list/contract-advance-paid-list-table-columns';
import type { GetContractAdvancesPaidQuery } from 'src/apollo/queries/contract-advance/__generated__/get-contract-advances-paid-list';
import type { ContractAdvanceRequestParams } from 'src/types/abacus-contract-advance';

export interface ContractAdvancePaidListProps {
    paidAdvances: GetContractAdvancesPaidQuery | undefined;
    paidAdvancesLoading: boolean;
    paidAdvancesRequestParams: ContractAdvanceRequestParams;
    setPaidAdvancesRequestParams: (
        params: ContractAdvanceRequestParams
    ) => void;
}

const ContractAdvancePaidList: React.FC<ContractAdvancePaidListProps> = ({
    paidAdvances,
    paidAdvancesLoading,
    paidAdvancesRequestParams,
    setPaidAdvancesRequestParams,
}) => {
    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);

    const isFeatureMilestoneNewOptionsEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_CONTRACT_ADVANCE_MILESTONE_NEW_OPTIONS
    );
    const milestoneOptionsMap = isFeatureMilestoneNewOptionsEnabled
        ? MILESTONE_OPTIONS_MAP
        : MILESTONES_MAP;

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

    if (
        paidAdvances?.abacusContractAdvancesPaid?.totalCount === 0 &&
        !paidAdvancesLoading
    )
        return (
            <div className="d-flex flex-column align-items-center">
                <Illustration name="emptyState" size={100} />
                <div className="ContractAdvance-no-advances">
                    {NO_PAID_ADVANCES}
                </div>
            </div>
        );

    return (
        <GridTable
            stickyHeader
            bordered
            className="ContractAdvancePaidList-table"
            columnDefs={ContractAdvancePaidListTableColumns(
                milestoneOptionsMap
            )}
            data={paidAdvances?.abacusContractAdvancesPaid?.items || []}
            defaultColumnDefs={{
                headerTextWrap: 'nowrap',
            }}
            loading={paidAdvancesLoading}
            loadingRows={DEFAULT_ITEMS_PER_PAGE}
            maxHeight={500}
            page={page}
            pageSize={pageSize}
            paginated
            onPageChange={setPage}
            onPageSizeChange={setPageSize}
            rowKey="contractAdvanceId"
            showUpdateIndicator
            totalCount={
                paidAdvances?.abacusContractAdvancesPaid?.totalCount || 0
            }
            variant="zebra"
        />
    );
};

export default ContractAdvancePaidList;