import React from 'react';
import { ABACUS_ACTIONS } from '@theorchard/accounting-apps-shared';
import { HelpTooltip, Label, Section } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import EligibilityAlert from 'src/components/account-detail/eligibility-alert';
import PayeeNameHistory, {
    type PaymentHistoryItem,
} from './payee-name-history';
import type { AccountDetailAccountPayee } from 'src/types/abacus-account';

export interface PaymentDetailProps {
    accountPayee: AccountDetailAccountPayee;
    accountPayeeHistory: PaymentHistoryItem[];
}

export default function PaymentDetail({
    accountPayee,
    accountPayeeHistory,
}: PaymentDetailProps) {
    const { payoneerPayeeName, actionStates } = accountPayee;

    const renderHelpText = () => (
        <div className="PayeeDetail-help-popup">
            This info is from{' '}
            <a href="https://www.payoneer.com/">
                Payoneer <GlyphIcon name="externalLink" size={16} />
            </a>
        </div>
    );

    return (
        <div
            className="PayeeDetail-payment-info"
            data-testid="payeePaymentInfo"
        >
            <Section>
                <Section.Body>
                    <Section>
                        <Section.Header title="Payment Details">
                            <span data-testid="payeeDetailTooltip">
                                <HelpTooltip
                                    id="payee-detail-popup"
                                    message={renderHelpText()}
                                    overlayType="popover"
                                    trigger={['click']}
                                    tooltipPlacement="bottom"
                                />
                            </span>
                        </Section.Header>
                        <Section.Body>
                            <EligibilityAlert
                                actionStates={actionStates}
                                actionName={ABACUS_ACTIONS.PAYMENT_ELIGIBILITY}
                            />
                            <div className="PayeeDetail-payee-metadata">
                                <div className="PayeeDetail-payee-metadata-item">
                                    <div>
                                        <Label text="Payee Name" />
                                    </div>
                                    {payoneerPayeeName}
                                </div>
                            </div>
                            <hr />
                            <PayeeNameHistory
                                accountPayee={accountPayee}
                                accountPayeeHistory={accountPayeeHistory}
                            />
                        </Section.Body>
                    </Section>
                </Section.Body>
            </Section>
        </div>
    );
}