import React, { FC } from 'react';
import { TopCountry } from 'src/selectors/soundRecordingCountries';
import ContentPanel from 'src/components/topPlaylists/topPlaylist/contentPanel/ContentPanel';
import TopCountryItem from '../topCountryItem/TopCountryItem';
import TopCountryHeader from '../header/Header';

const CLASSNAME = 'TopCountriesTable';
export const TEST_ID = CLASSNAME;
export const CLASSNAME_EMPTY_CONTENT = `${CLASSNAME}-empty-content`;
export const CLASSNAME_EMPTY_MESSAGE = `${CLASSNAME}-empty-message`;
export const CLASSNAME_EMPTY = `${CLASSNAME}-empty`;

export const EMPTY_MESSAGE = 'error.noData.message';

export interface Props {
    isrc: string;
    countries: TopCountry[],
    totalStreams: number;
    name?: string;
    index: number;
    songCount: number;
}

const TopCountriesTable: FC<Props> = ({ countries, index, name, totalStreams, songCount }) => {

    const noData = countries.length === 0 && totalStreams === 0;

    return (
        <div className={CLASSNAME} data-testid={TEST_ID}>
            <div className={`${CLASSNAME}-header`}>
                <TopCountryHeader index={index} title={name} />
            </div>
            <ContentPanel className={`${CLASSNAME}-content`} isEmpty={noData}>
                { countries.map(country => (
                    <TopCountryItem
                        key={`${country.code}${country.highlight && '-highlight'}`}
                        index={index}
                        country={country}
                        totalStreams={totalStreams}
                        songCount={songCount}
                    />
                ))}
            </ContentPanel>
        </div>
    );
};

export default TopCountriesTable;