import type { PropType, VNode } from 'vue'
import { computed, defineComponent } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'

export default defineComponent({
  name: 'Badge',
  props: {
    type: {
      type: String as () => 'circle' | 'dot' | 'custom' | 'ribbon',
      default: 'circle',
    },
    count: {
      type: [Number, String] as PropType<number | string>,
    },
    minCount: {
      type: [Number, String] as PropType<number | string>,
      default: undefined,
    },
    maxCount: {
      type: [Number, String] as PropType<number | string>,
    },
    showZero: {
      type: Boolean,
      default: false,
    },
    ribbonText: {
      type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
      default: '',
    },
    offset: {
      type: Array as PropType<(string | number)[]>,
      default: undefined,
    },
    color: {
      type: String,
      default: '',
    },
    backgroundColor: {
      type: String,
      default: '',
    },
    class: {
      type: [String, Array, Object],
      default: '',
    },
    style: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { slots }) {
    const prefixCls = getPrefixCls('badge')

    const displayCount = computed(() => {
      if (props.type !== 'circle')
        return props.count

      let countNum = Number(props.count)
      const maxNum = props.maxCount != null ? Number(props.maxCount) : null
      const minNum = props.minCount != null ? Number(props.minCount) : null

      const isCountNumeric = Number.isFinite(countNum)
      const isMaxNumeric = maxNum !== null && Number.isFinite(maxNum)
      const isMinNumeric = minNum !== null && Number.isFinite(minNum)

      // 如果传了 minCount，showZero 不生效
      if (!isMinNumeric && !props.showZero && countNum === 0)
        return undefined

      // 先处理 minCount
      if (isCountNumeric && isMinNumeric && countNum < (minNum as number)) {
        countNum = minNum as number
      }

      // 再处理 maxCount
      if (isCountNumeric && isMaxNumeric && countNum > (maxNum as number)) {
        return `${maxNum}+`
      }

      return countNum
    })

    return () => {
      const supStyle: Record<string, string> = {}

      if (props.offset && props.offset.length === 2) {
        const [x, y] = props.offset
        supStyle.top = typeof y === 'number' ? `${y}px` : y
        supStyle.right = typeof x === 'number' ? `${x}px` : x
      }

      // backgroundColor
      if (props.backgroundColor) {
        if (props.type === 'ribbon') {
          supStyle.backgroundColor = props.backgroundColor
          supStyle.color = props.backgroundColor
        }
        else {
          supStyle.color = props.backgroundColor
        }
      }
      const ribbonTextStyle: Record<string, string> = {}

      // color
      if (props.color) {
        if (props.type === 'ribbon') {
          ribbonTextStyle.color = props.color
        }
        else {
          supStyle.color = props.color
        }
      }

      let supNode = null

      if (props.type === 'dot') {
        supNode = <sup class={`${prefixCls}-dot`} style={supStyle}></sup>
      }
      else if (props.type === 'circle' && displayCount.value !== undefined) {
        supNode = (
          <sup class={`${prefixCls}-circle`} style={supStyle}>
            {displayCount.value}
          </sup>
        )
      }
      else if (props.type === 'custom') {
        supNode = (
          <sup class={`${prefixCls}-custom`} style={supStyle}>
            {slots.content?.()}
          </sup>
        )
      }
      else if (props.type === 'ribbon') {
        const renderRibbonText = () => {
          if (slots.ribbon)
            return slots.ribbon()
          if (typeof props.ribbonText === 'function')
            return props.ribbonText()
          return props.ribbonText
        }

        supNode = (
          <sup class={`${prefixCls}-ribbon`} style={supStyle}>
            <div class={`${prefixCls}-ribbon-text`} style={ribbonTextStyle}>
              {renderRibbonText()}
            </div>
            <div class={`${prefixCls}-ribbon-corner`}></div>
          </sup>
        )
      }

      return (
        <div class={[prefixCls, props.class]} style={{ ...props.style }}>
          {slots.default?.()}
          {supNode}
        </div>
      )
    }
  },
})