import React, {useRef, useEffect, useImperativeHandle} from "react";
import * as echarts from "echarts";
import theme from "./theme.json";
import './echarts-liquidfill'
// import('echarts-liquidfill');

echarts.registerTheme("darkBlue", theme);

export default React.forwardRef(({option}, ref) => {
    const chartRef = useRef(null);
    const chart = useRef();

    useEffect(() => {
        chart.current = echarts.init(chartRef.current, "darkBlue");
        let resize = () => {
            chart.current.resize();
        };
        window.addEventListener("resize", () => resize());
        return window.removeEventListener("resize", () => resize());
    }, []);

    useEffect(() => {
        if (chart && option) {
            // console.log("chart",chart)
            chart.current.setOption(option);
        }
    });

    useImperativeHandle(ref, () => ({
        setOption: (opt) => {
            // chart.current.setOption(Object.assign(opt, option));
            chart.current.setOption(opt);
        },
        getChart: () => chart.current,
    }));

    return <div ref={chartRef} style={{height: "100%", width: "100%"}}/>;
});