import React, { isValidElement, ReactNode, forwardRef } from 'react'
import RcTooltip from 'rc-tooltip'

import { usePrefix } from '../ConfigProvider'
import { useGetPopupContainer } from '../PopupContainerProvider'

export type TooltipPlacement = 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
export type TooltipTrigger = 'hover' | 'click' | 'focus'
export interface TooltipProps {
  /**
   * 内容
   */
  title: ReactNode
  /**
   * 位置
   *
   * @description 支持的位置有：['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']
   * @default top
   */
  placement?: TooltipPlacement
  /**
   * 触发方式
   *
   * @description 让 Tooltip 显示的交互方式，可选的有 'hover', 'click', 'focus'
   * @default hover
   */
  trigger?: TooltipTrigger | TooltipTrigger[]
  /**
   * 是否显示
   *
   * @default false
   */
  visible?: boolean
  /**
   * 默认是否显示
   *
   * @default false
   */
  defaultVisible?: boolean
  /**
   * visible 发生变更的时候触发
   */
  onVisibleChange?(visible: boolean): void
  /**
   * 自定义样式前缀
   */
  prefixCls?: string
  overlayClassName?: string
  /**
   * @deprecated use `overlayClassName` instead
   */
  className?: string
  children: ReactNode
}

export interface TooltipElement {
  nativeElement: HTMLElement
  forceAlign: () => void
}

export default forwardRef<TooltipElement, TooltipProps>(function Tooltip(props: TooltipProps, ref) {
  const { title, placement = 'top', children, prefixCls, overlayClassName, ...rest } = props
  const prefix = usePrefix('tooltip', prefixCls)
  const getPopupContainer = useGetPopupContainer()

  return (
    <RcTooltip
      ref={ref}
      prefixCls={prefix}
      placement={placement}
      overlay={title}
      overlayClassName={overlayClassName}
      getTooltipContainer={getPopupContainer}
      {...rest}
    >
      {isValidElement(children) ? children : <span>{children}</span>}
    </RcTooltip>
  )
})