import React from 'react';
import { Link, useParams } from 'react-router-dom';
import ContributorsList from 'src/components/contract-contributors-form/contributors-list';
import { LinkButton } from 'src/components/shared/link-button';
import { editContractContributors } from 'src/urls/frontend-royalties';
import type { GetContractPartyListQuery } from 'src/apollo/queries/contract-party/__generated__/get-contract-party-list';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';

type ContractPartyListItems =
    GetContractPartyListQuery['abacusContractParties']['items'][0];

export const CONTRIBUTORS_HEADERS = [
    'Contributors',
    'Schedules (# Of Contributions)',
];

export interface NrContractContributorsPropType {
    contractPartyList: ContractPartyListItems[];
    isContractPartyListLoading: boolean;
}

export const NrContractContributors: React.FC<
    NrContractContributorsPropType
> = ({ contractPartyList, isContractPartyListLoading }) => {
    const { contractId } = useParams<{ contractId: string }>();

    const noContributorsText = (
        <div
            className="ContractDetail-noContributors"
            data-testid="noContributors"
        >
            <i>No Contributors have been added to this contract.</i>
            <RestrictedByAbacusProfileWrapper>
                <>
                    <Link to={editContractContributors(contractId)}>
                        {' '}
                        ADD CONTRIBUTORS
                    </Link>{' '}
                    <i>to view or </i>
                    <i>
                        create associated schedules and add terms to this
                        contract.
                    </i>
                </>
            </RestrictedByAbacusProfileWrapper>
        </div>
    );

    return (
        <div className="ContractDetail-Contributors">
            <h3 className="ContractDetail-Contributors-header">Contributors</h3>
            <RestrictedByAbacusProfileWrapper>
                <LinkButton
                    buttonSize="md"
                    label="Edit"
                    target={editContractContributors(contractId)}
                    variant="default"
                />
            </RestrictedByAbacusProfileWrapper>
            <ContributorsList
                className="ContractDetail-Contributors-list"
                contractPartyListLoading={isContractPartyListLoading}
                contractContributors={contractPartyList}
                noContributorsFoundText={noContributorsText}
                contributorsListHeader={CONTRIBUTORS_HEADERS}
                tableRowHover={false}
            />
        </div>
    );
};