import type { PropsWithChildren } from 'react';
import React from 'react';
import { defaultTo } from 'lodash-es';
import { Link } from 'react-router-dom';
import { selectAccountingTab } from 'src/urls/frontend-royalties';
import { smartFormatter } from 'src/utils/amount-helpers';
import { getCurrencyLabel } from 'src/utils/currency';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';

interface PaymentAccountsTableColumns {
    statementPeriod: {
        statementPeriodId: string;
        statementPeriodName: string;
    };
    addNoteButton: any;
}

const PaymentGroupPaymentAccountsTableColumns = (
    props: PaymentAccountsTableColumns
) => {
    const { statementPeriod, addNoteButton } = props;

    const diffSpan = (color: string, value: string) => (
        <span
            className={`payment-diff-${color} `}
            data-testid={`payment-diff-${color} `}
        >
            {value}
        </span>
    );

    const PAYMENT_ACCOUNTS_COLUMNS: GridTableColumnDefinition<unknown>[] = [
        {
            name: 'accountName',
            title: 'Account Name',
            sortable: true,
            sortKey: 'accountName',
            visibility: 'visible-locked',
            fixed: true,
            maxWidth: '1fr',
            minWidth: '300px',
            Cell: ({
                data: { accountId, accountName },
            }: PropsWithChildren<CellProps<any>>) => (
                <Link
                    key={`account-link-${accountId}`}
                    to={selectAccountingTab(accountId)}
                >
                    {accountName}
                </Link>
            ),
        },
        {
            title: 'Account ID',
            name: 'accountId',
            minWidth: '9rem',
        },
        {
            name: 'currencyCode',
            title: 'Currency',
            sortable: true,
            minWidth: '12em',
            Cell: ({
                data: { currencyCode },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{getCurrencyLabel(currencyCode)}</>
            ),
        },
        {
            name: 'lastPayment',
            title: 'Last Payment',
            Cell: ({
                data: { currencyCode, lastPayment },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{smartFormatter(lastPayment, currencyCode)}</>
            ),
        },
        {
            name: 'currentBalance',
            title: 'Outstanding Balance',
            Cell: ({
                data: { currentBalance, currencyCode },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{smartFormatter(currentBalance, currencyCode)}</>
            ),
        },
        {
            name: 'taxWithholding',
            title: 'Tax Withholding',
            Cell: ({
                data: { currencyCode, taxWithholding },
            }: PropsWithChildren<CellProps<any>>) => (
                <>
                    {taxWithholding
                        ? smartFormatter(taxWithholding, currencyCode)
                        : '-'}
                </>
            ),
        },
        {
            name: 'vatAmount',
            title: 'Vat Amount',
            Cell: ({
                data: { currencyCode, vatAmount },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{vatAmount ? smartFormatter(vatAmount, currencyCode) : '-'}</>
            ),
        },
        {
            name: 'lastStatementPeriodId',
            title: 'Last Statement Period',
            Cell: ({
                data: { lastStatementPeriodName },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{lastStatementPeriodName ?? '-'}</>
            ),
            minWidth: '12rem',
        },
        {
            name: 'balanceAfterTax',
            title: `${statementPeriod?.statementPeriodName} Payment`,
            Cell: ({
                data: { balanceAfterTax, currencyCode },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{smartFormatter(balanceAfterTax, currencyCode)}</>
            ),
        },
        {
            name: 'closingBalanceStatementPeriodName',
            title: 'Closing Balance Statement Period',
            Cell: ({
                data: { closingBalanceStatementPeriodName },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{closingBalanceStatementPeriodName ?? '-'}</>
            ),
            minWidth: '12rem',
        },
        {
            name: 'paymentDifference',
            title: 'Diff',
            Cell: ({
                data: { currencyCode, paymentDifference },
            }: PropsWithChildren<CellProps<any>>) => {
                const formattedDiff =
                    paymentDifference &&
                    smartFormatter(paymentDifference, currencyCode);
                return (
                    <>
                        {parseFloat(defaultTo(paymentDifference, 0)) < 0
                            ? diffSpan('red', formattedDiff)
                            : diffSpan('green', formattedDiff)}
                    </>
                );
            },
        },
        {
            name: 'percentDifference',
            title: 'Diff %',
            minWidth: '7rem',
            Cell: ({
                data: { percentDifference },
            }: PropsWithChildren<CellProps<any>>) => (
                <>
                    {parseFloat(defaultTo(percentDifference, 0)) < 0
                        ? diffSpan('red', percentDifference)
                        : diffSpan('green', percentDifference)}
                </>
            ),
        },
        {
            name: 'note',
            title: 'Note',
            minWidth: '8rem',
            Cell: ({
                data: { accountName, paymentGroupPaymentAccountId, note },
            }: PropsWithChildren<CellProps<any>>) => (
                <>
                    {note ||
                        addNoteButton({
                            accountName,
                            paymentGroupPaymentAccountId,
                        })}
                </>
            ),
        },
        {
            name: 'paymentStatus',
            title: 'Status',
            Cell: ({
                data: { paymentStatus },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{paymentStatus || <div className="no-data">-</div>}</>
            ),
        },
        {
            name: 'paymentErrorCode',
            title: 'Error Message',
            Cell: ({
                data: { paymentErrorCode },
            }: PropsWithChildren<CellProps<any>>) => (
                <>{paymentErrorCode || <div className="no-data">-</div>}</>
            ),
        },
    ];

    return PAYMENT_ACCOUNTS_COLUMNS;
};

export default PaymentGroupPaymentAccountsTableColumns;