import React, { useEffect, useState } from 'react';
import { useApolloClient } from '@apollo/client';
import { GridTable } from '@theorchard/suite-components';
import { useParams } from 'react-router-dom';
import { useAbacusAccountingRunFragment } from 'src/apollo/queries/accounting-run';
import { useLedgerAccountingRunBalance } from 'src/apollo/queries/ledger-accounting-run-balance';
import { RunSummaryItemListColumns } from 'src/components/run-summary-item/run-summary-item-list-columns';
import {
    CONTRACT_TYPES,
    DEFAULT_ITEMS_PER_PAGE,
    USER_FEATURES,
} from 'src/constants';
import { useAccountingRunBreadcrumbs } from 'src/hooks/breadcrumbs/accountingRun';
import { isFeatureFlagEnabled } from 'src/utils/feature-flag';
import { PageHeader } from '../shared/pageHeader';
import type { GetLedgerAccountingRunBalanceQueryVariables } from 'src/apollo/queries/__generated__/ledger-accounting-run-balance';
import type { AbacusLedgerAccountingRunBalance } from 'src/types/ledger-accounting-run-balance';
import './styles.scss';

const RunSummaryItemList = () => {
    const client = useApolloClient();
    const [page, setPage] = useState<number>(0);
    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [runSummary, setRunSummary] =
        useState<AbacusLedgerAccountingRunBalance | null>([]);
    const [summaryItemsTotalCount, setSummaryItemsTotalCount] = useState<
        number | null
    >(0);
    const breadcrumbs = useAccountingRunBreadcrumbs();

    const { accountingRunId } = useParams<{ accountingRunId: string }>();

    const requestParams: GetLedgerAccountingRunBalanceQueryVariables = {
        accountingRunId,
        limit: pageSize,
        offset: page * pageSize,
    };

    const { data, loading } = useLedgerAccountingRunBalance(requestParams);

    useEffect(() => {
        if (data && data.abacusLedgerAccountingRunBalance) {
            const { items, totalCount } = data.abacusLedgerAccountingRunBalance;
            setRunSummary(items);
            setSummaryItemsTotalCount(totalCount);
        }
    }, [data]);

    const accountingRun = useAbacusAccountingRunFragment(
        accountingRunId,
        client.cache
    );

    // TODO: remove FF "ABACUS_CONTRACT_MECHANICAL_DEDUCTIONS_CALC"
    const isFeatureContractMechanicalDeductionsEnabled = isFeatureFlagEnabled(
        USER_FEATURES.ABACUS_CONTRACT_MECHANICAL_DEDUCTIONS_CALC
    );

    return (
        <>
            <PageHeader
                title="Monthly Accounting Run Summary"
                breadcrumbs={breadcrumbs}
            />
            <GridTable
                className="RunSummaryList"
                columnDefs={RunSummaryItemListColumns(
                    accountingRun?.accountingPeriod?.contractType ??
                        CONTRACT_TYPES.DISTRIBUTION,
                    isFeatureContractMechanicalDeductionsEnabled
                )}
                data={runSummary!}
                defaultColumnDefs={{
                    headerTextWrap: 'nowrap',
                }}
                hideColumnSeparators={true}
                loading={loading}
                loadingRows={pageSize}
                onPageChange={setPage}
                onPageSizeChange={setPageSize}
                paginated
                page={page}
                pageSize={pageSize}
                rowKey="ledgerAccountingRunBalanceId"
                stickyHeader
                totalCount={summaryItemsTotalCount!}
            />
        </>
    );
};

export default RunSummaryItemList;