import React, { FC } from 'react';
import { ButtonGroup, Button } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { STREAMS, DOWNLOADS } from 'src/constants/graphs';
import { SectionDataComponentProps } from 'src/definitions';

export const CLASSNAME = 'CompareSectionHeader';
export const TEST_ID = CLASSNAME;
export const TERM_STREAMS = 'comparison.streams';
export const TERM_DOWNLOADS = 'comparison.downloads';

const CompareSectionHeader: FC<SectionDataComponentProps> = ({ sectionData, setSectionData }) => {
    const { selectedMetric } = sectionData;
    const handleSelection = (metric: string) => () => {
        setSectionData({ selectedMetric: metric });
    };

    return (
        <ButtonGroup className={`${CLASSNAME} d-print-hide`} data-testid={TEST_ID}>
            <Button variant="secondary" active={selectedMetric === STREAMS} onClick={handleSelection(STREAMS)}>
                {formatMessage(TERM_STREAMS)}
            </Button>
            <Button variant="secondary" active={selectedMetric === DOWNLOADS} onClick={handleSelection(DOWNLOADS)}>
                {formatMessage(TERM_DOWNLOADS)}
            </Button>
        </ButtonGroup>
    );
};

export default CompareSectionHeader;