import React, { CSSProperties, ReactNode } from 'react'
import classnames from 'classnames'

import { ComponentSize, usePrefix } from '../ConfigProvider'
import { concat } from '../utils'

export type BadgeType = 'default' | 'success' | 'warning' | 'primary'

export type BadgeProps = {
  /** 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+ */
  count?: number
  /**
   * 展示封顶的数字值
   * @default 99
   */
  overflowCount?: number
  /**
   * 是否展示 Badge
   * @default true
   */
  visible?: boolean
  /**
   * 在设置了 count 的前提下有效, 支持 default、small
   * @default default
   */
  size?: ComponentSize
  /**
   * 支持 default、success、warning、primary
   * @default default
   */
  type?: BadgeType
  /** 自定义样式 */
  style?: CSSProperties
  className?: string
  children?: ReactNode
}

export function Badge({ count, overflowCount = 99, visible = true, type = 'default', size = 'default', style, className, children }: React.PropsWithChildren<BadgeProps>) {
  const prefix = usePrefix('badge')
  const countCls = concat(prefix, 'count')
  const sizeCls = concat(countCls, size)
  const dotCls = concat(prefix, 'dot')
  const typeCls = concat(prefix, type)
  const classname = classnames(
    className, sizeCls, countCls, typeCls,
    count == null && dotCls
  )

  function renderCount() {
    if (count == null) return null
    if (count > overflowCount) return `${overflowCount}+`
    return count
  }

  return (
    <div className={prefix}>
      { children }
      {visible && count !== 0 && (
        <span className={classname} style={style}>
          {renderCount()}
        </span>
      )}
    </div>
  )
}