import React, { FC } from 'react';
import { Button, DownloadSymbolIcon } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import cx from 'classnames';
import { useComparisonFilters } from 'src/queries';
import { trackEvent } from 'src/utils/segment';

export interface Props {
    disabled: boolean;
}

export const CLASSNAME = 'ExportButton';

const ExportButton: FC<Props> = ({ disabled }) => {
    const {
        countryFilter,
        storeFilter,
        selectedSongIds,
        dateFilter,
        potMetric
    } = useComparisonFilters();

    const handleClick = () => {
        window.print();
        trackEvent(
            'Export Button',
            `Songs: ${selectedSongIds.length}, Period: ${dateFilter}, Stores: ${storeFilter}, Countries: ${countryFilter}, Metric: ${potMetric}`
        );
    };
    return (
        <Button
            className={cx(CLASSNAME, 'd-print-none')}
            disabled={disabled}
            onClick={handleClick}
            title={formatMessage('comparison.printExport')}
        >
            <DownloadSymbolIcon />
        </Button>
    );
};

export default ExportButton;