import React, { FC } from 'react';
import { formatMessage } from '@orchard/frontend-localization';
import { Badge, PlaylistPlaceholderIcon } from '@orchard/frontend-react-components';
import { formatNumber } from 'src/utils/formatNumber';
import StoreIcon from 'src/utils/store';
import { PlaylistData } from 'src/selectors';
import ProgressBar from 'src/components/progressBar';
import { EMPTY_CHAR } from 'src/components/metric';

export const CLASSNAME = 'TopPlaylistItem';
export const TEST_ID = CLASSNAME;
export const TERM_FOLLOWERS_ONE = 'playlist.follower';
export const TERM_FOLLOWERS_MANY = 'playlist.followers';

export interface Props {
    playlist: PlaylistData;
    totalStreams: number;
    index: number;
    order?: number;
    playlistsCount: number;
}

const TopPlaylistItem: FC<Props> = ({ playlist, index, order, totalStreams, playlistsCount }) => {
    const { playlistUrl, playlistName, playlistImage, streams, followers, storeId } = playlist;
    const streamsNumber = Number(streams);
    const percentage = streamsNumber / Number(totalStreams);

    let text = EMPTY_CHAR;
    if (followers && Number.isInteger(followers)) {
        const term = followers === 1 ? TERM_FOLLOWERS_ONE : TERM_FOLLOWERS_MANY;
        const count = formatNumber(followers);
        text = formatMessage(term, { count });
    }

    const url = playlistUrl.startsWith('nohref') || playlistUrl.startsWith('spotify-personalized-playlist') ? null : playlistUrl;

    return (
        <div className={CLASSNAME} data-testid={TEST_ID}>
            <div className={`${CLASSNAME}-image-container`}>
                {
                    playlistImage
                        ? <img src={playlistImage} alt="" className={`${CLASSNAME}-image`} />
                        : <PlaylistPlaceholderIcon className={`${CLASSNAME}-image-empty`} />
                }
                <StoreIcon storeId={storeId} className={`${CLASSNAME}-store-icon`} />
                { order && <Badge variant="light" className={`${CLASSNAME}-badge`}>{ order }</Badge> }
            </div>
            <div className={`${CLASSNAME}-content`}>
                <div className={`${CLASSNAME}-title`}>
                    { url
                        ? <a href={url} title={playlistName} target="_blank" rel="noopener noreferrer">{ playlistName }</a>
                        : playlistName }
                </div>
                <div className={`${CLASSNAME}-additional`}>
                    { text }
                </div>
            </div>
            <div className={`${CLASSNAME}-progress-container`}>
                <div className={`${CLASSNAME}-streams`}>
                    { Number.isFinite(streamsNumber) ? formatNumber(streamsNumber) : EMPTY_CHAR }
                </div>
                <div className={`${CLASSNAME}-progress`}>
                    <ProgressBar value={percentage} index={index} showBar={playlistsCount < 4} />
                </div>
            </div>
        </div>
    );
};

export default TopPlaylistItem;