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

import { CloseIcon } from '../icons'
import { ComponentSize, usePrefix } from '../ConfigProvider'
import { concat } from '../utils'
import { WithRef } from '../utils/type'

export type TagColor = 'blue' | 'cobalt' | 'cyan' | 'green' | 'grey' | 'lemon' | 'magenta' | 'olivine' | 'orange-red' | 'orange' | 'purple' | 'red' | 'yellow'

export type CommonTagProps = {
  /** @default 'default' */
  size?: ComponentSize
  /**
   * 是否是无边框，颜色作为背景色的 `Tag`
   * @default false
   */
  filled?: boolean
  color?: TagColor
  /**
   * 是否可以关闭
   * @default false
   */
  closable?: boolean
  onClose?: () => void
  children: ReactNode
  rootHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
  className?: string
  style?: CSSProperties
}

export function Tag({ size = 'default', filled = false, color, closable = false, onClose, className, style, children, rootHtmlProps }: CommonTagProps) {
  const prefix = usePrefix('tag')
  const sizeCls = concat(prefix, size)
  const classname = classnames(
    prefix, className, sizeCls,
    color && concat(prefix, 'color', color),
    filled && concat(prefix, 'filled'),
    rootHtmlProps?.className
  )

  const styleObj = { ...style, ...rootHtmlProps?.style }

  return (
    <div {...rootHtmlProps} className={classname} style={styleObj}>
      <div className={concat(prefix, 'text')}>{children}</div>
      {closable && <CloseIcon className={concat(prefix, 'close')} onClick={onClose} />}
    </div>
  )
}