import { useResizeObserver } from '@vueuse/core'
import { nextTick, onBeforeUnmount, onMounted, type Ref } from 'vue'
import {
  echarts,
  type ECharts,
  type EChartsCoreOption,
} from '@/views/funds-cockpit/components/chart-runtime'

const BASE_CHART_WIDTH = 335

export function useCockpitChart(
  chartElement: Ref<HTMLElement | null>,
  createOption: (scale: number) => EChartsCoreOption,
) {
  let chart: ECharts | null = null

  function renderChart() {
    const element = chartElement.value

    if (!element || element.clientWidth <= 0 || element.clientHeight <= 0) return

    if (!chart) {
      chart = echarts.init(element, undefined, { renderer: 'canvas' })
    }

    const scale = Math.max(element.clientWidth / BASE_CHART_WIDTH, 0.82)
    chart.setOption(createOption(scale), { notMerge: true, lazyUpdate: true })
  }

  onMounted(() => {
    void nextTick(renderChart)
  })

  useResizeObserver(chartElement, () => {
    chart?.resize()
    renderChart()
  })

  onBeforeUnmount(() => {
    chart?.dispose()
    chart = null
  })

  return { renderChart }
}