import { Box } from '@mui/material';
import Highcharts from 'highcharts';
import HighchartsReact, { HighchartsReactProps } from 'highcharts-react-official';
import HighchartsMore from 'highcharts/highcharts-more';
import HCMap from 'highcharts/modules/map';
import wordCloud from 'highcharts/modules/wordcloud';
import React, { useEffect, useState } from 'react';
import './high_charts.scss';
import { getDefaultConfigurations } from './HighChartConfigUtils';
wordCloud(Highcharts);
HCMap(Highcharts);
if (typeof Highcharts === 'object') {
    HighchartsMore(Highcharts);
}
export interface HighChartProps extends HighchartsReactProps {
    title: string;
    options: Highcharts.Options;
    chartType?: string;
    data?: any;
    colours?: string[];
}
const HighCharts = ({ options, chartType, title, data, colours, allowChartUpdate = false }: any) => {
    const [chartOptions, setChartOptions] = React.useState(
        getDefaultConfigurations(chartType, data, colours) || options
    );
    const [show, setShow] = useState(true);
    const [key, setKey] = React.useState(0);
    // update here to allow update
    useEffect(() => {
        if (allowChartUpdate) {
            // There is a bug in HightChart, if we setOption directly, the mapBubble is not going to update
            // So we can only do like below
            setShow(false);
            setChartOptions(getDefaultConfigurations(chartType, data, colours) || options);
            setKey((prevKey) => prevKey + 1);
            setTimeout(() => {
                setShow(true);
            });
        }
    }, [data]);
    return (
        <Box className='high-chart-container'>
            <div className='chart-header'>
                <span className='font-medium text-medium text-title'>{title}</span>
            </div>
            <div className='chart-container'>
                {show && (
                    <HighchartsReact
                        highcharts={Highcharts}
                        options={chartOptions}
                        containerProps={{ className: 'highcharts-container' }}
                        constructorType={chartType === 'mapbubble' ? 'mapChart' : ''}
                        allowChartUpdate={allowChartUpdate}
                        key={key}
                    />
                )}
            </div>
        </Box>
    );
};
export default HighCharts;