import type { FormulaUIProps } from './types'
import { Row } from './components/row'
import { Value } from './components/value'
import { Prefix } from './components/prefix'
import { Suffix } from './components/suffix'
import { Series } from './components/series'
import { useWidgetRef } from '../../hooks'
import { Box } from '@mui/material'

/**
 * Renders a formula widget displaying one or more KPI values with optional prefixes, suffixes, and series indicators.
 */
export function FormulaUI(props: FormulaUIProps) {
  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} />
            <Value id={props.id} index={index} />
            <Suffix id={props.id} index={index} />
          </>
        )}
      </Row>
    </Box>
  )
}