import React, { FC } from 'react';
import cx from 'classnames';
import { formatMessage } from '@orchard/frontend-localization';
import { Help } from '@orchard/frontend-react-components';
import { formatPercentage } from 'src/utils/formatNumber';
import SeriesIcon from 'src/components/seriesIcon';
import { EMPTY_CHAR } from 'src/components/metric';

export const CLASSNAME = 'TopPlaylistHeader';
export const TERM_STREAMS = 'topPlaylists.header.streamsFromPlaylists';
export const TERM_STREAMS_TOOLTIP = 'topPlaylists.topPlaylistsToolTip';

export interface Props {
    title?: string;
    value: number;
    index: number;
}

const TopPlaylistHeader: FC<Props> = ({
    title, value, index,
}) => {
    const percentageClassName = cx(`${CLASSNAME}-percentage`, `color-dataviz-${index}`);
    const percentage = Number.isFinite(value) ? formatPercentage(value) : EMPTY_CHAR;
    return (
        <div className={CLASSNAME}>
            <div className={`${CLASSNAME}-icon-container`}>
                <SeriesIcon index={index} />
            </div>
            <div className={`${CLASSNAME}-content`} title={title}>
                { title }
            </div>
            <div className={`${CLASSNAME}-percent-container`}>
                <div className={percentageClassName}>
                    { percentage }
                </div>
                <div className={`${CLASSNAME}-streams-from-playlists`}>
                    { formatMessage(TERM_STREAMS) }
                    <Help id="topPlaylists" message={formatMessage(TERM_STREAMS_TOOLTIP)} />
                </div>
            </div>
        </div>
    );
};

export default TopPlaylistHeader;