import type { ReactNode } from 'react'
import type { BaseWidgetState, WidgetsStoreProps } from '../stores/types'
import type { WrapperState } from '../wrapper/types'
import type { DownloadItem } from '../actions/download/types'

export interface RangeUIProps {
  id: WidgetsStoreProps['id']
}

export interface RangeDataItem {
  min: number
  max: number
  value?: number[]
  step?: number
  marks?: boolean | { value: number; label?: string }[]
  disabled?: boolean
  color?: string
  note?: string | ReactNode
}

export interface RangeItemProps {
  id: WidgetsStoreProps['id']
  index: number
}

export type RangeWidgetData = RangeDataItem[]

export type RangeWidgetState = BaseWidgetState<
  WrapperState<RangeWidgetConfig>
> & {
  data: RangeWidgetData
}

export interface RangeWidgetConfig {
  formatter?: (value: number) => string
  onChange?: (value: number[], index: number) => void
}

export type RangeDownloadConfig = DownloadItem<RangeWidgetData>[]