import { Box, Typography } from '@mui/material'
import { styles } from '../style'
import { CategoryBar } from './category-bar'
import type { CategoryWidgetConfig } from '../types'

export interface CategoryRowMultiProps {
  name: string
  values: number[]
  maxValue: number
  colors: string[]
  formatter: NonNullable<CategoryWidgetConfig['formatter']>
  labelFormatter?: CategoryWidgetConfig['labelFormatter']
  onClick?: CategoryWidgetConfig['onRowClick']
  selected?: boolean
}

/**
 * Renders a multi-series category row with a label and multiple color-coded bars stacked vertically.
 */
export function CategoryRowMulti({
  name,
  values,
  maxValue,
  colors,
  formatter,
  labelFormatter,
  onClick,
  selected = true,
}: CategoryRowMultiProps) {
  const handleClick = onClick ? () => onClick({ name }) : undefined
  const rowStyle = onClick ? styles.rowClickable : styles.row

  return (
    <Box sx={rowStyle} onClick={handleClick}>
      <Typography sx={styles.rowLabel}>
        {labelFormatter ? labelFormatter(name) : name}
      </Typography>
      <Box sx={styles.barContainer}>
        {values.map((value, index) => (
          <Box key={`${name}-${value}-${index}`} sx={styles.multiBarRow}>
            <Box sx={styles.multiBarContainer}>
              <CategoryBar
                value={value}
                maxValue={maxValue}
                color={colors[index % colors.length] ?? ''}
                selected={selected}
              />
            </Box>
            <Typography sx={styles.multiBarValue}>
              {formatter(value)}
            </Typography>
          </Box>
        ))}
      </Box>
    </Box>
  )
}