import React, { FC } from 'react';
import cx from 'classnames';
import { formatNumber } from 'src/utils/formatNumber';
import { TopCountry } from 'src/selectors';
import ProgressBar from 'src/components/progressBar';
import { EMPTY_CHAR } from 'src/components/metric';

const CLASSNAME = 'TopCountryItem';
const THREE_COL = `${CLASSNAME}-3col`;
const FOUR_COL = `${CLASSNAME}-4col`;
const HIGHLIGHTED_COUNTRY = `${CLASSNAME}-highlighted`;
export const TEST_ID = CLASSNAME;

export interface Props {
    country: TopCountry;
    totalStreams: number;
    index: number;
    songCount: number;
}

const TopCountryItem: FC<Props> = ({ country, index, totalStreams, songCount }) => {
    const { name, position, value, alpha3 } = country;
    const percentage = Number(value) / Number(totalStreams);

    const classes = cx(CLASSNAME, { [THREE_COL]: songCount === 3, [FOUR_COL]: songCount === 4, [HIGHLIGHTED_COUNTRY]: country.highlight });

    return (
        <div className={classes} data-testid={TEST_ID}>
            <div className={`${CLASSNAME}-position`}>
                { position || EMPTY_CHAR }
            </div>
            <div className={`${CLASSNAME}-content`}>
                <div className={`${CLASSNAME}-title`}>
                    { songCount > 3 ? <abbr title={name}>{alpha3}</abbr> : name }
                </div>
            </div>
            <div className={`${CLASSNAME}-value`}>
                { value ? formatNumber(value) : EMPTY_CHAR }
            </div>
            <div className={`${CLASSNAME}-progress-container`}>
                <div className={`${CLASSNAME}-progress`}>
                    <ProgressBar value={percentage} index={index} />
                </div>
            </div>
        </div>
    );
};

export default TopCountryItem;