import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Alert, GridTable, Section } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import { ContractEarningsTransferListColumns } from 'src/components/contract-earnings-transfer-list/contract-earnings-transfer-list-columns';
import { DEFAULT_ITEMS_PER_PAGE, DEFAULT_NO_RESULTS_MSG } from 'src/constants';
import { useContractEarningsTransferList } from 'src/apollo/queries/earnings-transfer';
import { AbacusEarningsTransferTypesFilter } from 'src/apollo/definitions/globalTypes';
import './styles.scss';

export interface ContractEarningsTransferListPropTypes {
    expanded?: boolean;
    title: string;
    transferType: AbacusEarningsTransferTypesFilter;
}

const getNoTransfersMessage = (
    transferType: AbacusEarningsTransferTypesFilter,
    title: string
) => {
    switch (transferType) {
        case AbacusEarningsTransferTypesFilter.RECLASS:
            return 'No Balance transfers added yet for this contract.';
        case AbacusEarningsTransferTypesFilter.TRANSFER:
            return 'No Income transfers added yet for this contract.';
        default:
            return `No ${title} transfers added yet for this contract.`;
    }
};

const ContractEarningsTransferList: React.FC<
    ContractEarningsTransferListPropTypes
> = ({ expanded = false, title, transferType }) => {
    const { contractId } = useParams<{ contractId: string }>();

    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);
    const [totalCount, setTotalCount] = useState<number>(0);
    const { data, error, loading } = useContractEarningsTransferList(
        pageSize,
        page * pageSize,
        contractId,
        transferType
    );

    const renderNoResults = () => (
        <div className="d-flex flex-column align-items-left">
            <div className="text-muted">
                {getNoTransfersMessage(transferType, title)}
            </div>
        </div>
    );

    const renderNoError = () => (
        <Alert className="errorMsg" text={error?.message} variant="error" />
    );

    useEffect(() => {
        if (data && data?.abacusEarningsTransfersByContractId)
            setTotalCount(
                data?.abacusEarningsTransfersByContractId?.totalCount || 0
            );
    }, [data, loading]);

    const renderContent = () => (
        <Page.Grid className="ContractEarningsTransfer-PageGrid">
            <Page.Col>
                <GridTable
                    bordered
                    columnDefs={ContractEarningsTransferListColumns(contractId)}
                    data={
                        data?.abacusEarningsTransfersByContractId?.items || []
                    }
                    emptyStateTitle={DEFAULT_NO_RESULTS_MSG}
                    emptyStateIcon={<Illustration name="noResults" />}
                    loading={loading}
                    loadingRows={5}
                    maxHeight={500}
                    page={page}
                    pageSize={pageSize}
                    paginated
                    onPageChange={setPage}
                    onPageSizeChange={setPageSize}
                    rowKey="earningsTransferId"
                    showUpdateIndicator
                    testId="ContractEarningsTransfersGridTable"
                    totalCount={totalCount}
                    variant="zebra"
                />
            </Page.Col>
        </Page.Grid>
    );

    return (
        <Section expandable defaultExpanded={expanded} level="sub">
            <Section.Header>
                <div className="d-flex flex-column">
                    <div className="d-flex flex-row align-items-center">
                        <Section.Title>{title}</Section.Title>
                    </div>
                    <div
                        className="d-flex flex-row align-items-center suite-text-small ContractEarningsTransfer-TotalCount"
                        data-testid="ContractEarningsTransfer-TotalCount"
                    >
                        {totalCount}{' '}
                        {totalCount === 1 ? 'Transfer' : 'Transfers'}
                    </div>
                </div>
            </Section.Header>
            <Section.Body>
                {totalCount === 0 && !loading
                    ? renderNoResults()
                    : error
                      ? renderNoError()
                      : renderContent()}
            </Section.Body>
        </Section>
    );
};

export default ContractEarningsTransferList;