import { type SpreadWidgetState, type ValueProps } from '../types'
import { useWidgetSelector } from '../../stores/use-widget-selector'
import { Item } from '../../formula/components/item'
import { defaultFormatter } from '../../utils/formatter'

/**
 * Displays the formatted maximum value for a spread widget data item.
 */
export function MaxValue({ id, index = 0, ...props }: ValueProps) {
  const {
    max,
    color,
    formatter: _formatter,
  } = useWidgetSelector(id, (w) => {
    const sw = w as SpreadWidgetState | undefined
    return {
      max: sw?.data[index]?.max,
      color: sw?.data[index]?.color,
      formatter: sw?.formatter,
    }
  })
  const formatter = _formatter ?? defaultFormatter

  return (
    <Item TypographyProps={{ color }} {...props}>
      {formatter(max ?? 0)}
    </Item>
  )
}