import React from 'react';
import { Button, LoadingSpinner } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useContractAttachmentsObjects } from 'src/apollo/queries/contract-term';

interface ContractTermContributionProps {
    contractTermId: string;
    count?: number;
}

export default function ContractTermContribution({
    contractTermId,
    count,
}: ContractTermContributionProps) {
    const { data, loading, fetchMore } = useContractAttachmentsObjects(
        contractTermId,
        20,
        0
    );
    const contributions = data?.abacusContractTerm?.attachmentsObjects || [];

    return (
        <div className="Contributions" data-testid="contributionsTestId">
            <ul>
                {contributions.map(contribution => (
                    // @ts-expect-error TODO: fix type union issue, not all
                    // contributions have id and nrSoundRecording properties
                    <li key={contribution.id}>
                        <div className="Sound-Recording-name">
                            {/* @ts-expect-error TODO: fix type union issue */}
                            {contribution.nrSoundRecording.recordingTitle}
                        </div>
                        <div className="Contribution-id">
                            {/* @ts-expect-error TODO: fix type union issue */}(
                            {contribution.id})
                        </div>
                    </li>
                ))}
            </ul>
            <Button
                variant="quartenary"
                onClick={async () =>
                    await fetchMore({
                        variables: { offset: contributions.length, limit: 200 },
                    })
                }
                disabled={loading || contributions.length >= (count ?? 0)}
                data-testid="showMoreContributionButtonTestId"
            >
                <span>Show More</span>
                <span className="Contributions-list-icon">
                    {loading ? (
                        <LoadingSpinner show />
                    ) : (
                        <GlyphIcon name="chevronDown" size={16} />
                    )}
                </span>
            </Button>
        </div>
    );
}