import React, { FC } from 'react';
import { map } from 'lodash';
import { PlaylistData } from 'src/selectors';
import TopPlaylistItem from '../topPlaylistItem/TopPlaylistItem';
import TopPlaylistHeader from '../header/Header';
import ContentPanel from './contentPanel/ContentPanel';

const CLASSNAME = 'TopPlaylist';
export const TEST_ID = CLASSNAME;

export interface Props {
    isrc: string;
    playlists: PlaylistData[],
    totalStreams: number;
    totalPlaylistStreams: number;
    name?: string;
    index: number;
    playlistsCount: number;
    isLoading?: boolean;
}

const TopPlaylist: FC<Props> = ({
    playlists, index, name, totalStreams, totalPlaylistStreams, playlistsCount, isLoading,
}) => {
    const totalPercentage = totalPlaylistStreams / totalStreams;
    const isEmpty = !isLoading && playlists.length === 0;

    return (
        <div className={CLASSNAME} data-testid={TEST_ID}>
            <div className={`${CLASSNAME}-header`}>
                <TopPlaylistHeader index={index} title={name} value={totalPercentage} />
            </div>
            <ContentPanel className={`${CLASSNAME}-content`} isEmpty={isEmpty}>
                { map(playlists, (playlist, order) => (
                    <TopPlaylistItem
                        key={playlist.playlistUrl}
                        index={index}
                        order={order + 1}
                        playlist={playlist}
                        totalStreams={totalStreams}
                        playlistsCount={playlistsCount}
                    />
                ))}
            </ContentPanel>
        </div>
    );
};

export default TopPlaylist;