import type { CallbackDataParams as EChartsCallbackDataParams } from "echarts/types/dist/shared"
import type { HTMLAttributes } from "react"
import type { UseChartOptions } from "./useChart"

export type ChartEvent =
  | "axisareaselected"
  | "brush"
  | "brushend"
  | "brushselected"
  | "click"
  | "contextmenu"
  | "datarangeselected"
  | "dataviewchanged"
  | "datazoom"
  | "dblclick"
  | "downplay"
  | "finished"
  | "geoselectchanged"
  | "geoselected"
  | "geounselected"
  | "globalcursortaken"
  | "globalout"
  | "highlight"
  | "legendinverseselect"
  | "legendscroll"
  | "legendselectchanged"
  | "legendselected"
  | "legendunselected"
  | "magictypechanged"
  | "mousedown"
  | "mousemove"
  | "mouseout"
  | "mouseover"
  | "rendered"
  | "restore"
  | "selectchanged"
  | "timelinechanged"
  | "timelineplaychanged"

export type ChartEventProp =
  | "onAxisAreaSelected"
  | "onBrush"
  | "onBrushEnd"
  | "onBrushSelected"
  | "onClick"
  | "onContextMenu"
  | "onDataRangeSelected"
  | "onDataViewChanged"
  | "onDataZoom"
  | "onDoubleClick"
  | "onDownplay"
  | "onFinished"
  | "onGeoSelectChanged"
  | "onGeoSelected"
  | "onGeoUnselected"
  | "onGlobalCursorTaken"
  | "onGlobalOut"
  | "onHighlight"
  | "onLegendInverseSelect"
  | "onLegendScroll"
  | "onLegendSelectChanged"
  | "onLegendSelected"
  | "onLegendUnselected"
  | "onMagicTypeChanged"
  | "onMouseDown"
  | "onMouseMove"
  | "onMouseOut"
  | "onMouseOver"
  | "onRendered"
  | "onRestore"
  | "onSelectChanged"
  | "onTimelineChanged"
  | "onTimelinePlayChanged"

export type ChartEventsProps = {
  [K in ChartEventProp]?: (value?: any) => any
}

export const chartEvents: Record<ChartEventProp, ChartEvent> = {
  onClick: "click",
  onDoubleClick: "dblclick",
  onMouseDown: "mousedown",
  onMouseMove: "mousemove",
  onMouseOver: "mouseover",
  onMouseOut: "mouseout",
  onGlobalOut: "globalout",
  onContextMenu: "contextmenu",
  onHighlight: "highlight",
  onDownplay: "downplay",
  onSelectChanged: "selectchanged",
  onLegendSelectChanged: "legendselectchanged",
  onLegendSelected: "legendselected",
  onLegendUnselected: "legendunselected",
  onLegendInverseSelect: "legendinverseselect",
  onLegendScroll: "legendscroll",
  onDataZoom: "datazoom",
  onDataRangeSelected: "datarangeselected",
  onTimelineChanged: "timelinechanged",
  onTimelinePlayChanged: "timelineplaychanged",
  onRestore: "restore",
  onDataViewChanged: "dataviewchanged",
  onMagicTypeChanged: "magictypechanged",
  onGeoSelectChanged: "geoselectchanged",
  onGeoSelected: "geoselected",
  onGeoUnselected: "geounselected",
  onAxisAreaSelected: "axisareaselected",
  onBrush: "brush",
  onBrushEnd: "brushend",
  onBrushSelected: "brushselected",
  onGlobalCursorTaken: "globalcursortaken",
  onRendered: "rendered",
  onFinished: "finished",
}

export type ChartProps = UseChartOptions &
  Omit<HTMLAttributes<HTMLDivElement>, keyof UseChartOptions | ChartEventProp> & {
    "data-testid"?: string
    isLoading?: boolean
  }

export type CallbackDataParams = EChartsCallbackDataParams & {
  axisValue?: number | string
}