import React, { useEffect, useState } from 'react';
import { GridTable, SkeletonLoader } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import {
    DEFAULT_ITEMS_PER_PAGE,
    NO_QUEUED_ADVANCES,
    USER_FEATURES,
} from 'src/constants';
import {
    MILESTONES_MAP,
    MILESTONE_OPTIONS_MAP,
} from 'src/apollo/type-constants/advance';
import ContractAdvanceQueuedListTableColumns from 'src/components/contract-advance-list/contract-advance-queued-list-table-columns';
import type { GetContractAdvancesByStatusQuery } from 'src/apollo/queries/contract-advance/__generated__/get-contract-advances-by-status';
import type { ContractAdvanceRequestParams } from 'src/types/abacus-contract-advance';

type AbacusContract = NonNullable<
    GetContractAdvancesByStatusQuery['abacusContract']
>;
type AbacusContractAdvanceQueuedItem = NonNullable<
    AbacusContract['contractAdvances']
>;

export interface ContractAdvanceQueuedListProps {
    queuedAdvances: AbacusContractAdvanceQueuedItem | undefined;
    queuedAdvancesLoading: boolean;
    queuedAdvancesRequestParams: ContractAdvanceRequestParams;
    setQueuedAdvancesRequestParams: (
        params: ContractAdvanceRequestParams
    ) => void;
}

const ContractAdvanceQueuedList: React.FC<ContractAdvanceQueuedListProps> = ({
    queuedAdvances,
    queuedAdvancesLoading,
    queuedAdvancesRequestParams,
    setQueuedAdvancesRequestParams,
}) => {
    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);

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

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

    if (queuedAdvancesLoading) {
        return <SkeletonLoader shape="line" />;
    }

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

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

export default ContractAdvanceQueuedList;