/* Selection Summary Component */

import { Box, Button, Typography } from '@mui/material'
import type {
  WidgetSelectionSummaryProps,
  SelectionSummaryLabels,
} from './types'
import { styles } from './style'

const DEFAULT_SELECTION_LABELS: SelectionSummaryLabels = {
  allSelected: 'All selected',
  selections: (count: number) => `${count} selected`,
  clear: 'Clear',
}

/**
 * Displays the count of selected items with an optional clear button. Commonly used with the LockSelection action to show selection state in widgets.
 *
 * @example
 * ```tsx
 * <WidgetSelectionSummary
 *   selections={selectedItems.length}
 *   onClear={() => setSelectedItems([])}
 * />
 * ```
 */
export function WidgetSelectionSummary({
  selections,
  onClear,
  labels,
}: WidgetSelectionSummaryProps) {
  const allSelectedLabel =
    labels?.allSelected ?? DEFAULT_SELECTION_LABELS.allSelected

  const selectionsLabel =
    labels?.selections ?? DEFAULT_SELECTION_LABELS.selections

  const clearLabel = labels?.clear ?? DEFAULT_SELECTION_LABELS.clear

  const displayLabel =
    selections > 0 ? selectionsLabel(selections) : allSelectedLabel

  const showClearButton = selections > 0 && onClear

  return (
    <Box sx={styles.root}>
      <Typography variant='caption' color='textSecondary' fontWeight={500}>
        {displayLabel}
      </Typography>
      {showClearButton && (
        <Button size='small' variant='text' onClick={onClear}>
          {clearLabel}
        </Button>
      )}
    </Box>
  )
}