import React from 'react';
import {
    GlyphButton,
    Label,
    TruncatedText,
    Section,
} from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { Link } from 'react-router-dom';
import { PaymentType } from 'src/apollo/definitions/globalTypes';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { PAYMENT_SCHEDULE_MAP } from 'src/constants';
import { updateAccountPaymentTerm } from 'src/urls/frontend-royalties';
import { smartFormatter } from 'src/utils/amount-helpers';
import { getCurrencyLabel } from 'src/utils/currency';
import type {
    AccountDetailAgreementType,
    AccountDetailPaymentEntity,
} from 'src/types/abacus-account';

export interface PaymentGeneralDetailProps {
    paymentGeneralDetails: {
        accountId: string;
        accountPayeeId: string;
        currencyCode?: string;
        paymentEntity?: AccountDetailPaymentEntity | null;
        paymentSchedule?: string | null;
        paymentMinimum?: string | null;
        payoneerProgramId: number | null;
        payoneerProgramName: string | null;
        agreementType?: AccountDetailAgreementType | null;
        paymentType: PaymentType | null;
        sapVendorId?: string | null;
        paymentDescription: string | null;
    };
}

export default function PaymentGeneralDetail({
    paymentGeneralDetails: {
        accountId,
        accountPayeeId,
        currencyCode,
        paymentEntity,
        paymentSchedule,
        paymentMinimum,
        payoneerProgramId,
        payoneerProgramName,
        agreementType,
        paymentType,
        sapVendorId,
        paymentDescription,
    },
}: PaymentGeneralDetailProps) {
    const currencyLabel = currencyCode ? getCurrencyLabel(currencyCode) : '-';

    const paymentMin = () =>
        `${smartFormatter(paymentMinimum, currencyCode)} ${currencyLabel}`;

    return (
        <div
            className="AccountDetail-payment-general-details"
            data-testid="paymentGeneralDetails"
        >
            <Section>
                <Section.Header title="Payment General">
                    <RestrictedByAbacusProfileWrapper>
                        <Link to={updateAccountPaymentTerm(accountId)}>
                            <GlyphButton
                                data-testid="account-detail-edit-btn"
                                className="AccountDetail-edit-btn"
                                variant="secondary"
                                // @ts-expect-error: this component no longer accepts md as a size prop
                                size="md"
                                name="edit"
                                tooltip="edit"
                            />
                        </Link>
                    </RestrictedByAbacusProfileWrapper>
                </Section.Header>
                <Section.Body>
                    <div>
                        <Page.Grid className="PaymentGeneralDetails">
                            <Page.Col sm={12} md={3}>
                                <Label text="Paid By" />
                                <span data-testid="paidBy">
                                    {paymentEntity?.paymentEntityName || '-'}
                                </span>
                            </Page.Col>
                            <Page.Col sm={12} md={3}>
                                <Label text="Agreement Type" />
                                <span data-testid="agreementType">
                                    {agreementType?.agreementType || '-'}
                                </span>
                            </Page.Col>
                            <Page.Col sm={12} md={3}>
                                <Label text="Payment Currency" />
                                <span data-testid="paymentCurrency">
                                    {currencyLabel}
                                </span>
                            </Page.Col>
                            <Page.Col sm={12} md={3}>
                                <Label text="Payoneer Program" />
                                <span data-testid="payneerProgramName">
                                    {payoneerProgramName || '-'}
                                </span>
                            </Page.Col>

                            <Page.Col sm={12} md={3}>
                                <Label text="Payoneer Program ID" />
                                <span data-testid="payneerProgramId">
                                    {payoneerProgramId || '-'}
                                </span>
                            </Page.Col>
                            <Page.Col sm={12} md={3}>
                                <Label text="Payment Schedule" />
                                <span data-testid="paymentSchedule">
                                    {(paymentSchedule &&
                                        PAYMENT_SCHEDULE_MAP[
                                            paymentSchedule
                                        ]) ||
                                        '-'}
                                </span>
                            </Page.Col>
                            <Page.Col sm={12} md={3}>
                                <Label text="Payment Minimum" />
                                <span data-testid="paymentMinimum">
                                    {paymentMinimum ? paymentMin() : '-'}
                                </span>
                            </Page.Col>
                            <Page.Col sm={12} md={3}>
                                <Label text="Payment Method" />
                                <span data-testid="paymentMethod">
                                    {paymentType || '-'}
                                </span>
                            </Page.Col>
                            {paymentType === PaymentType.SAP && (
                                <Page.Col sm={12} md={3}>
                                    <Label text="SAP Vendor ID" />
                                    <span data-testid="paymentMethod">
                                        {sapVendorId || '-'}
                                    </span>
                                </Page.Col>
                            )}
                            <Page.Col sm={12} md={3}>
                                <Label text="Payee ID" />
                                <span data-testid="payeeId">
                                    {accountPayeeId || '-'}
                                </span>
                            </Page.Col>
                            <Page.Col sm={12} md={3}>
                                <Label text="Payment Description" />
                                <span data-testid="paymentDescription">
                                    <TruncatedText
                                        text={paymentDescription || '-'}
                                        maxWidth="100%"
                                    />
                                </span>
                            </Page.Col>
                        </Page.Grid>
                    </div>
                </Section.Body>
            </Section>
        </div>
    );
}