import React from 'react';
import { Link } from 'react-router-dom';
import {
    getAccountDetail,
    getContractDetail,
} from 'src/urls/frontend-royalties';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';

const ContractListTableColumns = (): GridTableColumnDefinition<unknown>[] => {
    const CONTRACT_LIST_COLUMNS: GridTableColumnDefinition<unknown>[] = [
        {
            name: 'contractName',
            minWidth: '300px',
            template: 'contractName',
            title: 'Contract Name',
            Cell: ({ data: { contractId, contractName } }: any) => (
                <div>
                    {contractName ? (
                        <Link
                            key={contractId}
                            to={getContractDetail(contractId)}
                        >
                            {contractName}
                        </Link>
                    ) : (
                        '-'
                    )}
                </div>
            ),
        },
        {
            name: 'contractId',
            title: 'Contract ID',
        },
        {
            name: 'accountName',
            minWidth: '300px',
            template: 'accountName',
            title: 'Account Name',
            Cell: ({ data: { accountId, accountName } }: any) => (
                <div>
                    {accountName ? (
                        <Link key={accountId} to={getAccountDetail(accountId)}>
                            {accountName}
                        </Link>
                    ) : (
                        '-'
                    )}
                </div>
            ),
        },
        {
            name: 'accountId',
            title: 'Account ID',
        },
        {
            name: 'contractType',
            minWidth: '150px',
            title: 'Contract Type',
        },
        {
            name: 'contractStatus',
            minWidth: '150px',
            title: 'Contract Status',
            Cell: ({ data: { contractStatus } }: any) => (
                <div>{contractStatus}</div>
            ),
        },
        {
            name: 'runController',
            minWidth: '150px',
            title: 'Run Controller',
        },
        {
            name: 'includedOrExcludedInRun',
            minWidth: '200px',
            title: 'Included/Excluded In Run',
            Cell: ({ data: { includedOrExcludedFromRun } }: any) => (
                <div data-testid="includedOrExcludedFromRunText">
                    {includedOrExcludedFromRun}
                </div>
            ),
        },
    ];
    return CONTRACT_LIST_COLUMNS;
};

export default ContractListTableColumns;