/**
 * 在支持输入多个值的输入控件（`MultiSelect` / `TagsInput`..） 中使用，以标签形式展示已输入项
 */
import React, { ReactNode } from 'react'
import cns from 'classnames'

import { usePrefix } from '../../ConfigProvider'
import { concat, getText } from '../../utils'
import { CloseCircleFilledIcon } from '../../icons'

export type ClosableObject = { onClose(e: React.MouseEvent): void }

/**
 * 未被折叠的输入项，独立平铺展示，支持删除操作
 */
export default function MultiInputTag<T>({ disabled, closable, className, children }: {
  disabled: boolean
  closable?: ClosableObject
  className?: string
  children: ReactNode
}) {
  const prefix = usePrefix('multi-input-tag')

  return (
    <div className={cns(prefix, className)} title={getText(children)}>
      <span className={concat(prefix, 'text')}>{children}</span>
      {closable && (
        <CloseCircleFilledIcon
          className={concat(prefix, 'icon')}
          onClick={disabled ? undefined : closable.onClose}
        />
      )}
    </div>
  )
}

/**
 * 被折叠的输入项，合并为折叠个数展示
 */
export function CollapsedNumTag({ num }: { num: number }) {
  const classname = usePrefix('multi-input-tag')
  return <div className={classname}>+{num}</div>
}