import React, { FC } from 'react';
import { formatMessage } from '@orchard/frontend-localization';

import { ComparisonSongs } from 'src/definitions';
import { useBatchStreamsBreakdownQuery } from 'src/queries';

import DataSourcesStatus from 'src/components/sourcesStatus';
import { SOURCE_STREAMS } from 'src/constants/stores';
import {
    selectStreamsBreakdownSourceOfStreams,
    selectStreamsBreakdownSourceOfStreamsSources
} from 'src/selectors/soundRecordingStreamsBreakdown';
import CompareSection from '../compareSection';
import { CLASSNAME_CONTENT, CLASSNAME_FOOTER } from '../compareSection/CompareSection';
import SourceOfStreamsChart from './chart';

export const CLASSNAME = 'SourceOfStreams';
export const TERM_HEADER = 'sourceOfStreams.title';


export const Content: FC<ComparisonSongs> = props => {
    const { data } = useBatchStreamsBreakdownQuery(props);

    const sosData = data.map(({ data: response }) => response);
    const series = selectStreamsBreakdownSourceOfStreams(sosData);
    const sources = selectStreamsBreakdownSourceOfStreamsSources(sosData);

    return (
        <>
            <div className={CLASSNAME_CONTENT}>
                <SourceOfStreamsChart series={series} />
            </div>
            <div className={CLASSNAME_FOOTER}>
                <DataSourcesStatus id={CLASSNAME} sources={sources} sourceTypes={[SOURCE_STREAMS]} />
            </div>
        </>
    );
};

const SourceOfStreams = () => (
    <CompareSection
        headerText={formatMessage(TERM_HEADER)}
        Content={Content}
    />
);

export default SourceOfStreams;