import React, { FC } from 'react';
import { Row, Col } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { ComparisonSongs } from 'src/definitions';
import { selectDemographicsBreakdownAge, selectDemographicsBreakdownGender, selectDemographicSources } from 'src/selectors';
import { useBatchDemographicsBreakdownQuery } from 'src/queries';
import SourcesStatus from 'src/components/sourcesStatus';
import { SOURCE_DOWNLOADS, SOURCE_STREAMS } from 'src/constants/stores';
import CompareSection, { CLASSNAME_FOOTER } from '../compareSection';
import { CLASSNAME_CONTENT } from '../compareSection/CompareSection';
import TopAudienceByAge from './byAge/TopAudienceByAge';
import TopAudienceByGender from './byGender/TopAudienceByGender';

export const CLASSNAME = 'TopAudience';
export const TEST_ID = CLASSNAME;
export const TERM_HEADER = 'topAudience.title';

export const Content: FC<ComparisonSongs> = props => {
    const { data } = useBatchDemographicsBreakdownQuery(props);
    const series = data.map(({ data: response }) => response);
    const ageSeries = selectDemographicsBreakdownAge(series);
    const genderSeries = selectDemographicsBreakdownGender(series);
    const sources = selectDemographicSources(series);

    return (
        <>
            <div className={`${CLASSNAME_CONTENT} ${CLASSNAME}`} data-testid={TEST_ID}>
                <Row className={`${CLASSNAME}-charts`}>
                    <Col xs={8}>
                        <TopAudienceByAge series={ageSeries} />
                    </Col>
                    <Col xs={4}>
                        <TopAudienceByGender series={genderSeries} />
                    </Col>
                </Row>
            </div>
            <div className={CLASSNAME_FOOTER}>
                <SourcesStatus
                    id={CLASSNAME}
                    sources={sources}
                    sourceTypes={[SOURCE_STREAMS, SOURCE_DOWNLOADS]}
                />
            </div>
        </>
    );
};

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

export default TopAudience;