import type { EChartsOption } from 'echarts'
import type * as echarts from 'echarts'
import type { BaseWidgetState } from '../stores/types'
import type { Ref, RefObject } from 'react'
import { theme as CartoTheme } from '@carto/meridian-ds/theme'

export type EchartOptionsProps = EChartsOption

export interface EchartUIProps {
  id: string
  option: EchartOptionsProps
  className?: string
  init?: echarts.EChartsInitOpts
  style?: React.CSSProperties
  ref?: Ref<echarts.ECharts>
  onEvents?: Record<string, Parameters<echarts.ECharts['on']>[2]>
}

export interface EchartProps {
  id: EchartUIProps['id']
}

export type EchartWidgetData = Record<string, string | number>[][]

export type EchartWidgetState = BaseWidgetState<{
  option: EchartUIProps['option']
  onEvents?: EchartUIProps['onEvents']
  init?: EchartUIProps['init']
  instance?: RefObject<echarts.ECharts | null>
}>

export interface EchartWidgetOptionProps<D> {
  data?: D
  theme: typeof CartoTheme
  formatter?: (value: number) => string
  labelFormatter?: (value: string | number) => string | number
}

export interface EchartWidgetProps {
  type: string
  option: EchartUIProps['option']
  onEvents?: EchartUIProps['onEvents']
  formatter?: (value: number) => string
  labelFormatter?: (value: string | number) => string | number
}