import React, { useEffect, useState } from 'react';
import { NetworkStatus } from '@apollo/client';
import { GridTable } from '@theorchard/suite-components';
import { usePayoneerProgramsList } from 'src/apollo/queries/payment-entity-payoneer-program';
import { DEFAULT_ITEMS_PER_PAGE, DEFAULT_NO_RESULTS_MSG } from 'src/constants';
import usePagination from 'src/hooks/pagination';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { GetPaymentEntityPayoneerProgramsListQuery } from 'src/apollo/queries/payment-entity-payoneer-program/__generated__/get-payment-entity-payoneer-programs-list';

type AbacusPaymentEntityPayoneerProgramsList = NonNullable<
    GetPaymentEntityPayoneerProgramsListQuery['abacusPaymentEntityPayoneerProgramsList']
>;
type AbacusPayoneerProgramItem = NonNullable<
    AbacusPaymentEntityPayoneerProgramsList['items']
>[0];

export const PAYONEER_PROGRAMS_LIST_HEADERS: GridTableColumnDefinition[] = [
    {
        name: 'paymentEntityName',
        title: 'Paid By',
    },
    {
        name: 'agreementType',
        title: 'Agreement Type',
        minWidth: '200px',
    },
    {
        name: 'paymentCurrency',
        title: 'Payment Currency',
        minWidth: '200px',
    },
    {
        name: 'payoneerProgramName',
        title: 'Payoneer Program',
    },
    {
        name: 'payoneerProgramId',
        title: 'Payoneer Program Id',
    },
    {
        name: 'fundingCurrency',
        title: 'Funding Currency',
    },
];

const PayoneerProgramsList: React.FC = () => {
    const [payoneerProgramsList, setPayoneerProgramsList] = useState<
        AbacusPayoneerProgramItem[]
    >([]);
    const [payoneerProgramsCount, setPayoneerProgramsCount] =
        useState<number>(0);

    const { data, fetchMore, loading, networkStatus } = usePayoneerProgramsList(
        DEFAULT_ITEMS_PER_PAGE,
        0
    );

    const formatList = (items: any) => {
        const payoneerPrograms = items.map(
            (payoneerProgram: AbacusPayoneerProgramItem) => ({
                agreementType: payoneerProgram?.agreementType?.replace(
                    /,/g,
                    ', '
                ),
                fundingCurrency:
                    payoneerProgram?.payoneerProgram?.fundingCurrency,
                paymentCurrency: payoneerProgram?.paymentCurrency?.replace(
                    /,/g,
                    ', '
                ),
                paymentEntityName:
                    payoneerProgram?.referencePaymentEntity?.paymentEntityName,
                payoneerProgramId:
                    payoneerProgram?.payoneerProgram?.payoneerProgramId,
                payoneerProgramName:
                    payoneerProgram?.payoneerProgram?.payoneerProgramName,
            })
        );
        setPayoneerProgramsList(payoneerPrograms);
    };

    useEffect(() => {
        if (data) {
            const {
                abacusPaymentEntityPayoneerProgramsList: { items, totalCount },
            }: any = data;
            formatList(items);
            setPayoneerProgramsCount(totalCount);
        }
    }, [data]);

    const fetchMoreWrapper = ({ variables: { limit, offset } }: any) => {
        const variables = { limit, offset };
        fetchMore({ variables });
    };

    const { renderPagination } = usePagination({
        fetchMore: fetchMoreWrapper,
        totalItemCount: payoneerProgramsCount,
        itemsPerPage: DEFAULT_ITEMS_PER_PAGE,
        tableId: 'payoneer-programs-list',
    });

    return (
        <div>
            <h2>Payoneer Programs</h2>
            {payoneerProgramsCount === 0 && !loading && (
                <div className="NoResultsFound">{DEFAULT_NO_RESULTS_MSG}</div>
            )}
            {payoneerProgramsCount !== 0 && (
                <GridTable
                    className="PayoneerProgramsListTable"
                    name="PayoneerProgramsList"
                    data={payoneerProgramsList}
                    rowKey="payoneerProgramId"
                    bordered
                    loading={
                        loading || networkStatus === NetworkStatus.fetchMore
                    }
                    columnDefs={PAYONEER_PROGRAMS_LIST_HEADERS}
                    footer={renderPagination()}
                />
            )}
        </div>
    );
};

export default PayoneerProgramsList;