import React from 'react';
import { sortBy } from 'lodash-es';
import { useTrackByBatchIsrc } from 'src/apollo/queries/track-search';

interface ContractTermTrackNameProps {
    isrcs: string[];
}

export default function ContractTermTrackName({
    isrcs,
}: ContractTermTrackNameProps) {
    const { data: tracksData, loading } = useTrackByBatchIsrc(isrcs);

    return (
        <div className="Tracks" data-testid="tracksNamesTestId">
            {!loading &&
                tracksData &&
                sortBy(tracksData, 'data.globalSoundRecordingByIsrc.name').map(
                    (trackData, index) => (
                        <div
                            className="Track"
                            key={`${trackData?.data?.globalSoundRecordingByIsrc?.isrc}${index}`}
                        >
                            <span className="Track-name">
                                {
                                    trackData?.data?.globalSoundRecordingByIsrc
                                        ?.name
                                }
                            </span>{' '}
                            -
                            <div />
                            <span className="Track-isrc">
                                {
                                    trackData?.data?.globalSoundRecordingByIsrc
                                        ?.isrc
                                }
                            </span>
                        </div>
                    )
                )}
        </div>
    );
}