import * as React from 'react';
import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { Card, AnalyticsOutline } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { ChartProps, ChartPointHoverCallback, ChartSeries } from './definitions';
import options from './options';

export const CLASSNAME = 'PerformanceChart';
export const CLASSNAME_ERROR = `${CLASSNAME}-error`;
export const CLASSNAME_ERROR_MESSAGE = `${CLASSNAME_ERROR}-message`;

export const TEST_ID = CLASSNAME;

const ChartError: React.FC<{ message: string, subMessage?: string }> = ({ message, subMessage }) => (
    <div className={CLASSNAME_ERROR}>
        <Card body>
            <AnalyticsOutline />
            <h4 className={CLASSNAME_ERROR_MESSAGE}>{message}</h4>
            {subMessage && <div>{subMessage}</div>}
        </Card>
    </div>
);

const PerformanceChart: React.FC<ChartProps> = props => {
    const { error, loading, series, datePeriod, onPointHover } = props;
    const instance = React.useRef<HighchartsReact>(null);

    const handlePointOver: ChartPointHoverCallback = points => {
        if (onPointHover)
            onPointHover(points);
    };

    const handleMediaChange = () => {
        if (instance.current)
            instance.current.chart.reflow();
    };

    const chartOptions = React.useMemo(() =>
        options.createChartOptions({ ...props, onPointHover: handlePointOver }), [series, datePeriod]);

    const noData = !error && !loading
        && chartOptions.series
        && chartOptions.series.length > 0
        && !(chartOptions.series as ChartSeries[]).some((serie: ChartSeries) => serie.data && serie.data.length > 0);

    React.useEffect(() => {
        const mediaQueryList = window.matchMedia && window.matchMedia('print');
        if (mediaQueryList)
            mediaQueryList.addListener(handleMediaChange);
        return () => mediaQueryList && mediaQueryList.removeListener(handleMediaChange);
    }, []);

    return (
        <div className={CLASSNAME} data-testid={TEST_ID}>
            <HighchartsReact ref={instance} highcharts={Highcharts} options={chartOptions} />
            {error && <ChartError message={formatMessage('error.zero.message')} />}
            {noData && (
                <ChartError
                    message={formatMessage('error.noData.message')}
                    subMessage={formatMessage('error.noData.tryAgain')}
                />
            )}
        </div>
    );
};

export default PerformanceChart;