import type { SpreadUIProps } from './types'

import { Separator } from './components/separator'
import { MinValue } from './components/min-value'
import { MaxValue } from './components/max-value'
import { Prefix, Row, Suffix, Series } from '../formula'
import { useWidgetRef } from '../../hooks'
import { Box } from '@mui/material'

/**
 * Renders a spread widget displaying min-max value pairs with optional prefixes, suffixes, and series indicators.
 */
export function SpreadUI(props: SpreadUIProps) {
  const { ref } = useWidgetRef(props.id)

  return (
    <Box ref={ref}>
      <Row id={props.id}>
        {({ index }) => (
          <>
            <Series id={props.id} index={index} />
            <Prefix id={props.id} index={index} />
            <MinValue id={props.id} index={index} />
            <Separator />
            <MaxValue id={props.id} index={index} />
            <Suffix id={props.id} index={index} />
          </>
        )}
      </Row>
    </Box>
  )
}