import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';

echarts.use([
    SVGRenderer,
    BarChart,
    LineChart,
    PieChart,
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent
]);

interface EchartWrapperProps {
    option: any;
    width: number;
    height: number;
}

export default function EchartWrapper({ option, width, height }: EchartWrapperProps) {
    const chartRef = useRef<any>(null);
    const instanceRef = useRef<any>(null);

    // Chart initialization and disposal
    useEffect(() => {
        let chart: any;
        if (chartRef.current) {
            chart = echarts.init(chartRef.current, 'light', {
                renderer: 'svg',
                width,
                height,
            });
            instanceRef.current = chart;
            if (option) {
                chart.setOption(option, true);
            }
        }

        return () => {
            chart?.dispose();
            instanceRef.current = null;
        };
    }, []);

    // Update options when option prop changes
    useEffect(() => {
        if (instanceRef.current && option) {
            instanceRef.current.setOption(option, true);
        }
    }, [option]);

    // Handle dynamic resize
    useEffect(() => {
        if (instanceRef.current && width && height) {
            instanceRef.current.resize({ width, height });
        }
    }, [width, height]);

    return <SvgChart ref={chartRef} />;
}