import React, { FC, RefObject } from 'react';
import { useComparisonFilters } from 'src/queries';
import SelectedSong from 'src/components/songSelection/selectedSong';
import { getPeriodName, getStoreName, getCountryName } from 'src/selectors/filters';
import StickyHeader from './StickyHeader';

interface Props {
    target: RefObject<HTMLElement>;
}

const CLASSNAME = 'ComparisonHeader';
const CLASSNAME_SONGS = `${CLASSNAME}-songs`;
const CLASSNAME_FILTERS = `${CLASSNAME}-filters`;
const CLASSNAME_FILTER = `${CLASSNAME}-filter filter-value`;

const ComparisonHeader: FC<Props> = ({ target }) => {
    const {
        selectedSongIds,
        countryFilter,
        dateFilter,
        storeFilter
    } = useComparisonFilters();

    return (
        <StickyHeader target={target}>
            <div className={CLASSNAME}>
                <div className={CLASSNAME_SONGS}>
                    {selectedSongIds.map((isrc: string, index) => (
                        <SelectedSong key={isrc} isrc={isrc} index={index} iconSize={15} />
                    ))}
                </div>
                <div className={CLASSNAME_FILTERS}>
                    <div className={CLASSNAME_FILTER}>{getCountryName(...countryFilter)}</div>
                    <div className={CLASSNAME_FILTER}>{getStoreName(...storeFilter)}</div>
                    <div className={CLASSNAME_FILTER}>{getPeriodName(dateFilter)}</div>
                </div>
            </div>
        </StickyHeader>
    );
};

export default ComparisonHeader;