import type { PropsWithChildren } from 'react';
import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import { Link } from 'react-router-dom';
import PaymentGroupPaymenStatusOverview from 'src/components/payments-list/payment-group-payment-status-overview';
import { smartFormatter } from 'src/utils/amount-helpers';
import { getCurrentPaymentStatus } from 'src/utils/payments-list';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { USER_FEATURES } from 'src/constants';
import cx from 'classnames';

const usePaymentListTableColumns = (expandedRows: Record<string, React.FC>) => {
    const isTablesRevampEnabled = useFeatureFlag(
        USER_FEATURES.TAP_PAYMENT_TABLES_REVAMP
    );
    const isTapDraftPaymentsEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_TAP_DRAFT_PAYMENTS
    );
    const amountCellExtraProps = isTablesRevampEnabled
        ? {
              maxWidth: '1fr',
              minWidth: 'min-content',
          }
        : {};

    // TODO: remove as soon as TAP_PAYMENT_TABLES_REVAMP is released and replace with formatAmountV2
    const formatAmount = (
        amounts: { currencyCode: string; currencyTotal: string }[],
        paymentGroupPaymentId: string
    ) => {
        const key = `amountItem-${paymentGroupPaymentId}`;
        if (amounts.length === 0) {
            return [<span className="amountItem empty" key={key} />];
        }
        if (amounts.length === 1) {
            const { currencyCode, currencyTotal } = amounts[0];
            return [
                <div className="amountItem one" key={key}>
                    {`${smartFormatter(
                        currencyTotal,
                        currencyCode
                    )} ${currencyCode}`}
                </div>,
            ];
        }
        return amounts.map((amount, index) => {
            const { currencyCode, currencyTotal } = amount;
            return (
                <div
                    className={`amountItem ${index > 0 ? 'expandable' : ''}`}
                    key={`${key}-${currencyCode}`}
                >
                    <div className="amountItem-currency">{`${smartFormatter(
                        currencyTotal,
                        currencyCode
                    )} ${currencyCode}`}</div>
                    {index === 0 && (
                        <div className="icon">
                            <GlyphIcon
                                name={
                                    expandedRows[paymentGroupPaymentId]
                                        ? 'chevronUp'
                                        : 'chevronDown'
                                }
                                size={16}
                            />
                        </div>
                    )}
                </div>
            );
        });
    };

    const formatAmountV2 = (
        amounts: { currencyCode: string; currencyTotal: string }[],
        paymentGroupPaymentId: string
    ) => {
        const keyPrefix = `amountItem-${paymentGroupPaymentId}`;
        const isExpanded = !!expandedRows[paymentGroupPaymentId];

        if (amounts.length === 0) {
            return <span className="amount-empty" key={keyPrefix} />;
        }

        const firstAmount = amounts[0];
        const extraAmounts = amounts.slice(1);
        const hasMany = amounts.length > 1;

        const renderRow = (total: string, code: string, isMain = false) => (
            <div
                className={cx('amount-row', { main: isMain, extra: !isMain })}
                key={`${keyPrefix}-${code}`}
            >
                <span className="amount-value">
                    {`${smartFormatter(total, code)} ${code}`}
                </span>
                {isMain && hasMany && (
                    <div className="amount-icon">
                        <GlyphIcon
                            name={isExpanded ? 'chevronUp' : 'chevronDown'}
                            size={16}
                        />
                    </div>
                )}
            </div>
        );

        return (
            <div className="amount-cell-container" key={keyPrefix}>
                {renderRow(
                    firstAmount.currencyTotal,
                    firstAmount.currencyCode,
                    true
                )}

                {hasMany && isExpanded && (
                    <div className="amount-dropdown">
                        {extraAmounts.map(amt =>
                            renderRow(amt.currencyTotal, amt.currencyCode)
                        )}
                    </div>
                )}
            </div>
        );
    };

    const PAYMENT_LIST_COLUMNS: GridTableColumnDefinition<unknown>[] = [
        {
            name: 'paymentName',
            title: 'Payment Name',
            maxWidth: '1fr',
            minWidth: 'min-content',
            Cell: ({
                data: { paymentName, paymentGroupPaymentId },
            }: PropsWithChildren<CellProps<any>>) => (
                <Link
                    key={`account-link-${paymentGroupPaymentId}`}
                    to={`payment/${paymentGroupPaymentId}`}
                >
                    {paymentName}
                </Link>
            ),
        },
        {
            name: 'groupName',
            title: 'Group Name',
            maxWidth: '1fr',
            minWidth: 'min-content',
            Cell: ({
                data: { paymentGroup },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{paymentGroup.groupName}</>
            ),
        },
        {
            name: 'createdAt',
            title: 'Date Created',
            maxWidth: '1fr',
            minWidth: 'min-content',
            Cell: ({
                data: { createdAt },
            }: PropsWithChildren<CellProps<any>>) => <>{createdAt}</>,
        },

        {
            name: 'amount',
            title: 'Amount',
            className: 'amount-cell',
            ...amountCellExtraProps,
            Cell: ({
                data: { overview, paymentGroupPaymentId },
            }: PropsWithChildren<CellProps<any>>) => {
                if (isTablesRevampEnabled)
                    return formatAmountV2(overview, paymentGroupPaymentId);

                const formattedAmount =
                    formatAmount(overview, paymentGroupPaymentId) || [];
                return (
                    <div>
                        {expandedRows[paymentGroupPaymentId]
                            ? formattedAmount
                            : formattedAmount[0]}
                    </div>
                );
            },
        },
        {
            name: 'accountCount',
            title: '# Accounts',
            maxWidth: '120px',
            minWidth: 'min-content',
            Cell: ({
                data: { accountCount },
            }: PropsWithChildren<CellProps<any>>) => <>{accountCount}</>,
        },
        {
            name: 'status',
            title: 'Status',
            Cell: ({
                data: { actionStates, paymentFileStatus },
            }: PropsWithChildren<CellProps<any>>) => (
                <>
                    {getCurrentPaymentStatus(
                        actionStates,
                        isTapDraftPaymentsEnabled && paymentFileStatus
                    )}
                </>
            ),
        },
        {
            name: 'statusDetails',
            title: 'Status Details',
            Cell: ({
                data: { paymentGroupPaymentId, paymentsStatusOverview },
            }: PropsWithChildren<CellProps<any>>) => (
                <PaymentGroupPaymenStatusOverview
                    paymentGroupPaymentId={paymentGroupPaymentId}
                    paymentsStatusOverview={paymentsStatusOverview}
                />
            ),
        },
    ];

    return PAYMENT_LIST_COLUMNS;
};

export default usePaymentListTableColumns;