import React, { HTMLAttributes, useRef } from 'react'
import cns from 'classnames'

import { BaseUploadRef, BaseUpload, BaseUploadProps } from './BaseUpload'
import { concat } from '../utils'
import { usePrefix } from '../ConfigProvider'
import { WithRef } from '../utils/type'

export interface SelectUploadProps extends Omit<BaseUploadProps, 'type'> {
  /** 上传按钮的 html 属性 */
  buttonHtmlProps?: WithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
}

export function Select(props: SelectUploadProps) {
  const { children, buttonHtmlProps, ...baseProps } = props
  const prefix = usePrefix('upload')
  const buttonPrefix = concat(prefix, 'button')
  const baseUploadRef = useRef<BaseUploadRef>(null)

  return (
    <BaseUpload ref={baseUploadRef} {...baseProps}>
      <span
        {...buttonHtmlProps}
        className={cns(buttonPrefix, buttonHtmlProps?.className)}
        onClick={() => baseUploadRef.current?.handleClick()}
      >
        {children}
      </span>
    </BaseUpload>
  )
}