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 minimum value for a spread widget data item.
 */
export function MinValue({ id, index = 0, ...props }: ValueProps) {
  const {
    min,
    color,
    formatter: _formatter,
  } = useWidgetSelector(id, (w) => {
    const sw = w as SpreadWidgetState | undefined
    return {
      min: sw?.data[index]?.min,
      color: sw?.data[index]?.color,
      formatter: sw?.formatter,
    }
  })
  const formatter = _formatter ?? defaultFormatter

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