import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import { GridTable, Section } from '@theorchard/suite-components';
import { usePaymentGroupPaymentList } from 'src/apollo/queries/payment-group-payment';
import {
    DEFAULT_ITEMS_PER_PAGE,
    NO_PAYMENTS_RESULTS,
    USER_FEATURES,
} from 'src/constants';
import usePaymentListTableColumns from './hooks/use-payments-list-table-columns';
import type { GridTableRowInstance } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';

const PaymentsListTable: React.FC = () => {
    const isTablesRevampEnabled = useFeatureFlag(
        USER_FEATURES.TAP_PAYMENT_TABLES_REVAMP
    );
    const [pageSize, setPageSize] = useState(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState(0);
    const [totalCount, setTotalCount] = useState(0);
    const [requestParams, setRequestParams] = useState({
        limit: pageSize,
        offset: page * pageSize,
    });
    const [expandedRows, setExpandedRows] = useState<Record<string, FC>>({});

    const { data, loading } = usePaymentGroupPaymentList(requestParams);
    const abacusPaymentGroupPayments = data?.abacusPaymentGroupPayments;
    const items = abacusPaymentGroupPayments?.items || [];

    const handleRowClick = ({ key }: GridTableRowInstance<any>) => {
        if (expandedRows[key]) setExpandedRows({});
        else
            setExpandedRows({
                [key]: () => null,
            });
    };

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

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

    const columnDefs = usePaymentListTableColumns(expandedRows);

    const tableExtraProps = isTablesRevampEnabled
        ? {
              variant: 'zebra' as const,
              stickyHeader: true,
          }
        : {
              stickyColumnHeaders: true,
              stickyColumnHeadersOffset: -30,
          };
    const table = (
        <GridTable
            bordered
            totalCount={totalCount}
            page={page}
            pageSize={pageSize}
            paginated
            onPageChange={setPage}
            onPageSizeChange={setPageSize}
            showUpdateIndicator
            columnDefs={columnDefs}
            data={items}
            loading={loading}
            loadingRows={DEFAULT_ITEMS_PER_PAGE}
            className="PaymentsListTable"
            onRowClick={handleRowClick}
            rowClickEnabled={(row: GridTableRowInstance<any>) =>
                row.data.overview.length > 1
            }
            rowKey="paymentGroupPaymentId"
            emptyStateTitle={NO_PAYMENTS_RESULTS}
            {...tableExtraProps}
        />
    );

    if (isTablesRevampEnabled) {
        return (
            <Section>
                <Section.Body>
                    <Section.Table>{table}</Section.Table>
                </Section.Body>
            </Section>
        );
    }

    return <div>{table}</div>;
};

export default PaymentsListTable;