import { Text, View } from '@tarojs/components'
import type { FC, ReactNode } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'

export type TagSize = 'small' | 'normal'
type TagType = 'primary' | 'danger' | 'warning' | 'info' | 'bulk' | 'plate' | 'bulkCut'

interface PropsType {
  type?: TagType
  plain?: boolean
  disabled?: boolean
  size?: TagSize
  children?: ReactNode
  onClick?: Function
  circle?: boolean
  customStyle?: React.CSSProperties
  customClassName?: string
}

const Tag: FC<PropsType> = (props) => {
  const {
    type = 'primary',
    size = 'normal',
    disabled = false,
    children,
    onClick,
    circle = false,
    customStyle = {},
    plain = false, // 朴素
    customClassName = '',
  } = props
  const handleClick = (event) => {
    if (disabled) {
      return
    }
    onClick && onClick(event)
  }

  const getClassName = () => {
    const classObject = {
      [styles['tag--disabled']]: disabled,
      [styles[`tag--${size}`]]: size,
      [styles[`tag--${type}`]]: type,
      [styles['tag--plain']]: plain,
      [styles['tag--circle']]: circle,
    }
    return classObject
  }
  return (
    <View className={classnames(styles.tag, getClassName(), customClassName)} style={customStyle} onClick={handleClick}>
      <Text className={styles['tag--text']}>{children}</Text>
    </View>
  )
}
export default Tag
