import React from 'react';
import { Link } from 'react-router-dom';
import TableBasic from 'src/components/shared/table-basic';
import { CONTRACT_TYPE_MAP } from 'src/constants';
import { getContractDetail } from 'src/urls/frontend-royalties';

export interface AttachedContractsProps {
    contracts: {
        contractId: number;
        contractName: string;
        contractType: keyof typeof CONTRACT_TYPE_MAP;
        runController?: {
            runControllerId?: number;
            runControllerName: string;
        };
    }[];
    isLoading: boolean;
}

export default function AttachedContracts({
    contracts = [],
    isLoading = true,
}: AttachedContractsProps) {
    const headers = ['Contract Name', 'Contract Type', 'Run Controller'];

    const formatContracts = () =>
        contracts.map(contract => {
            const { contractId, contractName, contractType, runController } =
                contract;
            const contractNameField = (
                <Link to={getContractDetail(contractId)}>{contractName}</Link>
            );
            return {
                id: contractId,
                cols: [
                    contractNameField,
                    CONTRACT_TYPE_MAP[contractType],
                    runController && runController.runControllerName,
                ],
            };
        });

    return (
        <div
            className="PaymentDetail-contracts"
            data-testid="paymentDetailContracts"
        >
            <TableBasic
                headers={headers}
                isLoading={isLoading}
                rows={formatContracts()}
            />
            {contracts.length === 0 && (
                <i>No contracts are attached to this payee</i>
            )}
        </div>
    );
}