import React from 'react';
import { ListViewItem, Section } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import FiltersToolbar from './components/filters-toolbar';
import usePaymentSearch, {
    UsePaymentSearchResult,
} from 'src/components/payments-list/payment-search/hooks/use-payment-search';
import { useAccountPaymentSearch } from 'src/components/payments-list/payment-search/hooks/use-account-payment-search';
import Table from 'src/components/payments-list/payment-search/components/table';
import './styles.scss';

const CLASS_NAME = 'PaymentSearch';
const CLASS_NAME_TOOLBAR = `${CLASS_NAME}-Toolbar`;
export const CLASS_NAME_TABLE = `${CLASS_NAME}-Table`;

/**
 * Config for the account-scoped variant. Pins the search to one account:
 * account filter/column hidden, rows ungrouped, contract filter becomes a
 * dropdown, payment file shown as plain text.
 */
interface AccountPaymentSearchConfig {
    accountId: string;
    contractOptions: ListViewItem[];
}

interface PaymentSearchProps {
    accountConfig?: AccountPaymentSearchConfig;
}

/**
 * Shared layout for both variants. Fed a hook result so each can pick its own
 * search strategy (server-per-filter vs fetch-once + local) without duplicating
 * the toolbar/table.
 */
const PaymentSearchView: React.FC<{
    search: UsePaymentSearchResult;
    isAccountScoped: boolean;
    contractOptions?: ListViewItem[];
}> = ({ search, isAccountScoped, contractOptions }) => {
    const {
        data,
        loading,
        error,
        draftFilters,
        queryParams,
        handleFilterChange,
    } = search;

    return (
        <>
            <Page.Toolbar className={CLASS_NAME_TOOLBAR}>
                <FiltersToolbar
                    filters={draftFilters}
                    onChange={handleFilterChange}
                    hideAccountFilter={isAccountScoped}
                    contractOptions={contractOptions}
                />
            </Page.Toolbar>
            <Section>
                <Section.Body>
                    <Section.Table>
                        <Table
                            queryParams={queryParams}
                            data={data}
                            loading={loading}
                            error={error}
                            isAccountScoped={isAccountScoped}
                        />
                    </Section.Table>
                </Section.Body>
            </Section>
        </>
    );
};

const GlobalPaymentSearch: React.FC = () => {
    const search = usePaymentSearch();
    return <PaymentSearchView search={search} isAccountScoped={false} />;
};

/**
 * Account-scoped variant: fetch-once + local filtering (server fallback above
 * the cap). Only reached via the tap_payment_history-gated tab.
 */
const AccountScopedPaymentSearch: React.FC<{
    accountConfig: AccountPaymentSearchConfig;
}> = ({ accountConfig }) => {
    const search = useAccountPaymentSearch(accountConfig.accountId);
    return (
        <PaymentSearchView
            search={search}
            isAccountScoped
            contractOptions={accountConfig.contractOptions}
        />
    );
};

const PaymentSearch: React.FC<PaymentSearchProps> = ({ accountConfig }) =>
    accountConfig ? (
        <AccountScopedPaymentSearch accountConfig={accountConfig} />
    ) : (
        <GlobalPaymentSearch />
    );

export default PaymentSearch;