import { Chip } from '@mui/material'
import type { PickDeep } from 'type-fest'
import { LASSO_TOOLS_LABELS } from './const'
import { styles } from './styles'
import type { LassoToolsComponentProps, LassoToolsData } from './types'
import { Tooltip } from '../tooltip/tooltip'

export function LassoToolsUIChip({
  chipProps,
  value,
  labels,
  onChipToggle,
  onDelete,
}: Pick<LassoToolsComponentProps, 'chipProps' | 'onDelete' | 'onChipToggle'> & {
  value: LassoToolsData
  labels?: PickDeep<LassoToolsComponentProps['labels'], 'chip'>['chip']
}) {
  const chipState = value.visible ? 'active' : 'inactive'
  const chipLabel =
    labels?.tooltip?.[chipState] ?? LASSO_TOOLS_LABELS.chip.tooltip[chipState]

  return (
    <Tooltip title={chipLabel} placement='bottom' {...chipProps?.TooltipProps}>
      <Chip
        sx={{
          ...styles.chip.chip,
        }}
        color={value.visible ? 'secondary' : 'default'}
        size='small'
        onDelete={() => onDelete(value.id)}
        label={value.label}
        onClick={() => onChipToggle(value.id, !value.visible)}
        {...chipProps?.ChipsProps}
      />
    </Tooltip>
  )
}