import React, { useEffect, useState, useMemo } from 'react'
import * as echarts from '@/subpackages/native/ec-canvas/echarts';

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  return chart;
}

export default (props) => {
  const { options } = props
  
  const [chart, setChart] = useState()

  const ec = useMemo(() => {
    const onInit = (...args) => {
      const t = initChart(...args)
      setChart(t)
      return t
    }

    return { onInit }
  }, [])

  useEffect(() => {
    if (options && chart) {
      chart.setOption(options);
    }
  }, [options, chart])

  return (
    <ec-canvas ec={ec} />
  )
}
