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

import { ComparisonSongs } from 'src/definitions';

import DataSourcesStatus from 'src/components/sourcesStatus';
import { useBatchStreamsBreakdownQuery } from 'src/queries';
import {
    selectStreamsBreakdownStreamsBySubscription,
    selectStreamsBreakdownStreamsBySubscriptionSources,
    StreamsBreakdownStreamsBySubscription
} from 'src/selectors/soundRecordingStreamsBreakdown';
import { SOURCE_STREAMS } from 'src/constants/stores';
import CompareSection from '../compareSection';
import { CLASSNAME_CONTENT, CLASSNAME_FOOTER } from '../compareSection/CompareSection';
import StreamsBySubscriptionChart from './chart';

export const CLASSNAME = 'StreamsBySubscription';
export const TERM_HEADER = 'streamsBySubscription.title';

const formatData = (data: StreamsBreakdownStreamsBySubscription) => (
    data ? [
        {
            label: 'streamsBySubscription.subscription',
            value: data.subscription.total
        },
        {
            label: 'streamsBySubscription.adSupported',
            value: data.adSupported.total
        },
        {
            label: 'streamsBySubscription.midTier',
            value: data.midTier.total
        }
    ] : [
        { label: 'streamsBySubscription.subscription', value: null },
        { label: 'streamsBySubscription.adSupported', value: null },
        { label: 'streamsBySubscription.midTier', value: null }
    ]
);

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

    const streamsBreakdownData = data.map(({ data: response }) => response);
    const sources = selectStreamsBreakdownStreamsBySubscriptionSources(streamsBreakdownData);
    const series = selectStreamsBreakdownStreamsBySubscription(streamsBreakdownData);

    return (
        <>
            <div className={CLASSNAME_CONTENT}>
                {selectedSongIds.map((id, index) =>
                    <StreamsBySubscriptionChart key={id} index={index} data={formatData(series[index])} />)}
            </div>
            <div className={CLASSNAME_FOOTER}>
                <DataSourcesStatus
                    id={CLASSNAME}
                    sources={sources}
                    sourceTypes={[SOURCE_STREAMS]}
                />
            </div>
        </>
    );
};

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

export default StreamsBySubscription;