import { PropsOf } from '@codeleap/types'
import { StyledProp } from '@codeleap/styles'
import { Text } from '../Text'
import { View, ViewProps } from '../View'
import { BadgeComposition } from './styles'

/**
 * The Badge is rendered inside the parent's layout flow, not absolutely positioned by default.
 * To overlay it on a sibling (e.g. a notification dot on an icon), the parent must use
 * `position: 'relative'` and the badge wrapper style must declare `position: 'absolute'`.
 */
export type BadgeProps =
  Omit<ViewProps, 'style'> &
  {
    style?: StyledProp<BadgeComposition>
    maxCount?: number
    minCount?: number
    debugName?: string
    innerWrapperProps?: Partial<PropsOf<typeof View>>
    textProps?: Partial<PropsOf<typeof Text>>
    getBadgeContent?: (props: BadgeContent) => string
    renderBadgeContent?: (props: BadgeContent & { content: string }) => React.ReactElement
    disabled?: boolean
    badge?: number | boolean
  }

export type BadgeContent = BadgeProps & { count: number }

export type BadgeComponentProps = {
  badge?: BadgeProps['badge']
  badgeProps?: Partial<BadgeProps>
}