import type { PropsWithChildren } from 'react';
import React from 'react';
import { GlyphButton, Tag } from '@theorchard/suite-components';
import { Link } from 'react-router-dom';
import { GlyphIcon } from '@theorchard/suite-icons';
import { getContractDetail } from 'src/urls/frontend-royalties';
import { CONTRACT_EARNINGS_TRANSFER_SOURCES_MAP } from 'src/apollo/type-constants/contract-earnings-transfer';
import TruncatedText from 'src/components/shared/truncated-text';
import { amountFormatter } from 'src/utils/amount-helpers';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';

export const ContractEarningsTransferListColumns = (
    currentContractId: string
) => {
    const contractColumn = (
        contractId: string,
        contractName: string,
        accountId: string,
        accountName: string
    ) => (
        <>
            <div className="d-flex flex-column ContractEarningsTransfer-ContractName">
                <TruncatedText
                    placement="top"
                    routeUrl={getContractDetail(contractId)}
                    useLink={currentContractId !== contractId}
                    value={contractName}
                />
                <div className="d-flex flex-row align-items-center suite-text-small ContractEarningsTransfer-AccountName">
                    Account:
                    <TruncatedText
                        placement="top"
                        useLink={false}
                        value={accountName}
                    />
                </div>
                <div className="d-flex flex-row">
                    {currentContractId === contractId && (
                        <Tag text="Current Contract" />
                    )}
                </div>
            </div>
        </>
    );
    const CONTRACT_EARNINGS_TRANSFER_LIST_COLUMNS: GridTableColumnDefinition<unknown>[] =
        [
            {
                name: 'earningsTransferId',
                title: 'ID',
                maxWidth: '50px',
                minWidth: '50px',
                Cell: ({
                    data: { earningsTransferId },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{earningsTransferId}</>
                ),
            },
            {
                name: 'processType',
                title: 'Process Type',
                maxWidth: '150px',
                minWidth: '150px',
                Cell: ({
                    data: { useStaticBalance },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{useStaticBalance ? 'In Parallel' : 'In Sequence'}</>
                ),
            },
            {
                name: 'fromContract',
                title: 'From Contract',
                maxWidth: '200px',
                minWidth: '200px',
                Cell: ({
                    data: {
                        fromContract: { contractName, contractId, account },
                    },
                }: PropsWithChildren<CellProps<any>>) =>
                    contractColumn(
                        contractId,
                        contractName,
                        account?.accountId,
                        account?.accountName
                    ),
            },
            {
                name: 'toContract',
                title: 'To Contract',
                maxWidth: '200px',
                minWidth: '200px',
                Cell: ({
                    data: {
                        toContract: { contractName, contractId, account },
                    },
                }: PropsWithChildren<CellProps<any>>) =>
                    contractColumn(
                        contractId,
                        contractName,
                        account?.accountId,
                        account?.accountName
                    ),
            },
            {
                name: 'rate',
                title: 'Rate',
                align: 'right',
                Cell: ({
                    data: { transferAmount, rateType },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>
                        {rateType === 'percent'
                            ? `${transferAmount}%`
                            : amountFormatter(transferAmount, 'USD')}
                    </>
                ),
            },
            {
                name: 'input',
                title: 'Transfer Source',
                maxWidth: '150px',
                minWidth: '150px',
                Cell: ({
                    data: { input },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>
                        {input
                            ? CONTRACT_EARNINGS_TRANSFER_SOURCES_MAP[input]
                            : '-'}
                    </>
                ),
            },
            {
                name: 'active',
                title: 'Active',
                maxWidth: '150px',
                minWidth: '150px',
                Cell: ({
                    data: { active },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{active ? 'Active' : 'Not Active'}</>
                ),
            },
            {
                name: 'negative',
                title: 'Process Negative Closing Balances',
                maxWidth: '150px',
                minWidth: '150px',
                Cell: ({
                    data: { negative },
                }: PropsWithChildren<CellProps<any>>) => (
                    <>{negative ? 'Yes' : 'No'}</>
                ),
            },
            {
                name: 'createdAt',
                title: 'Date Created',
                maxWidth: '150px',
                minWidth: '150px',
                Cell: ({
                    data: { createdAt },
                }: PropsWithChildren<CellProps<any>>) => <>{createdAt}</>,
            },

            {
                name: 'action',
                title: 'Actions',
                maxWidth: '100px',
                minWidth: '100px',
                Cell: ({
                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                    data: {
                        earningsTransferId,
                        fromContract: { contractId },
                    },
                }: PropsWithChildren<CellProps<any>>) => {
                    return currentContractId === contractId ? (
                        <Link
                            className="ContractEarningsTransfer-Edit"
                            data-testid="ContractEarningsTransfer-Edit"
                            to={`/contract/${currentContractId}/earnings-transfer/${earningsTransferId}/edit`}
                        >
                            <GlyphIcon name="edit" size={16} />
                        </Link>
                    ) : (
                        <GlyphButton
                            data-testid="ContractEarningsTransfer-Edit-Disabled"
                            name="edit"
                            variant="secondary"
                            tooltip='You can edit this transfer from the "From Contract" page.'
                            disabled
                        />
                    );
                },
            },
        ];
    return CONTRACT_EARNINGS_TRANSFER_LIST_COLUMNS;
};