import React, { FC } from 'react';
import { formatMessage } from '@orchard/frontend-localization';
import { ComparisonSongs } from 'src/definitions';
import { useBatchPlaylistsQuery, useBatchStreamsQuery } from 'src/queries';
import {
    selectName,
    selectStreamTotals,
    selectPlaylistSources
} from 'src/selectors';
import { STREAMS } from 'src/constants/graphs';
import { SOURCE_STREAMS } from 'src/constants/stores';
import SourcesStatus from 'src/components/sourcesStatus/SourcesStatus';
import { DEFAULT_PLAYLISTS_COUNT, DEFAULT_PLAYLISTS_TOTAL_COUNT } from 'src/constants/playlists';
import { trackEvent } from 'src/utils/segment';
import CompareSection, { CLASSNAME_CONTENT, CLASSNAME_FOOTER } from '../compareSection';
import TopPlaylist from './topPlaylist/TopPlaylist';
import ShowMoreLess from '../showMoreLess/ShowMoreLess';

export const CLASSNAME = 'TopPlaylists';
export const TERM_HEADER = 'topPlaylists.title';

export const Content: FC<ComparisonSongs> = props => {
    const { data: playlistData, loading, showCount, count } = useBatchPlaylistsQuery(props);
    const { data: streamsData } = useBatchStreamsQuery(props);

    const sources = selectPlaylistSources(playlistData);
    const maxPlaylistCount = Math.max(...playlistData.map(data => data.playlists.length));

    const totalStreams = selectStreamTotals(streamsData, STREAMS);
    const handleMore = () => {
        showCount(DEFAULT_PLAYLISTS_TOTAL_COUNT);
        trackEvent('Show More', 'Playlists');
    };
    const handleLess = () => {
        showCount(DEFAULT_PLAYLISTS_COUNT);
        trackEvent('Show Less', 'Playlists');
    };

    return (
        <>
            <div className={`${CLASSNAME_CONTENT} ${CLASSNAME}`}>
                { playlistData.map((song, index) => (
                    <TopPlaylist
                        key={song.isrc}
                        isrc={song.isrc}
                        index={index}
                        playlists={song.playlists.slice(0, count)}
                        totalStreams={totalStreams[index] || 0}
                        totalPlaylistStreams={song.totalStreams}
                        name={selectName(song)}
                        playlistsCount={playlistData.length}
                        isLoading={loading}
                    />
                )) }
            </div>
            <div className={`${CLASSNAME}-show-more`}>
                <ShowMoreLess
                    onMore={handleMore}
                    onLess={handleLess}
                    isLoading={loading}
                    disabled={maxPlaylistCount <= DEFAULT_PLAYLISTS_COUNT}
                />
            </div>
            <div className={CLASSNAME_FOOTER}>
                <SourcesStatus
                    id={CLASSNAME}
                    sources={sources}
                    sourceTypes={[SOURCE_STREAMS]}
                />
            </div>
        </>
    );
};

const TopPlaylists = () => (
    <CompareSection
        headerText={formatMessage(TERM_HEADER)}
        Content={Content}
        className="TopPlaylistsSection"
    />
);

export default TopPlaylists;