import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import * as echarts from 'echarts';
import useSettings from '../vm-hooks/useSettings';
import './style';
import { setPresetOptions } from './theme';
export const ChartTitle = props => {
    const { title } = props;
    const { theme } = useSettings();
    return <div className={`chart-title ${theme}`}>{title}</div>;
};
/**
 * echarts容器
 * @param props
 */
const VMChart = props => {
    console.log(props.option);
    const { defaultOption = true } = props;
    const ref = useRef(null);
    const { isDark } = useSettings();
    useEffect(() => {
        const myChart = echarts.init(ref.current, 'VMTheme');
        let option = props.option;
        if (defaultOption) {
            setPresetOptions(option, isDark);
        }
        myChart.setOption(option);
        const chartResize = () => {
            myChart.resize();
        };
        window.addEventListener('resize', chartResize);
        return () => {
            window.removeEventListener('resize', chartResize);
        };
    }, [props.option]);
    if (!props.option) return null;
    return <div ref={ref} style={{ height: props.height, width: props.width }}></div>;
};

VMChart.propTypes = {
    defaultOption: PropTypes.any,
    option: PropTypes.any,
    height: PropTypes.number,
    width: PropTypes.number,
};
ChartTitle.propTypes = {
    title: PropTypes.string,
};
export default VMChart;