import React, { ReactNode, useState } from 'react'

import { usePrefix } from '../ConfigProvider'
import Tooltip, { TooltipProps } from '../Tooltip'
import { concat } from '../utils'
import Inner from './Inner'
import { ButtonProps } from '../Button'

export type PopoverButtons = {
  /**
   * 主要按钮的文案
   *
   * @default 确定
   */
  okText?: string
  /**
   * 次要按钮的文案
   *
   * @default 取消
   */
  cancelText?: string
  okButtonProps?: ButtonProps
  cancelButtonProps?: ButtonProps
  /**
   * 次要按钮的 onClick 回调
   */
  onCancel?(event: React.MouseEvent<HTMLButtonElement>): void
  /**
   * 主要按钮的 onClick 回调
   */
  onOk?(event: React.MouseEvent<HTMLButtonElement>): void
}

export interface PopoverProps extends Omit<TooltipProps, 'title'> {
  /**
   * 标题
   */
  title?: ReactNode
  /**
   * 标题上的图标, 如果标题不存在则显示在 content 旁边
   */
  icon?: true | ReactNode
  /**
   * 是否带确认取消按钮
   */
  buttons?: true | PopoverButtons
  /**
   * 内容
   */
  content: ReactNode
}

export default function Popover(props: PopoverProps) {
  const { title, content, icon, prefixCls, buttons, defaultVisible = false, onVisibleChange, ...rest } = props
  const [tooltipVisible, setTooltipVisible] = useState(defaultVisible)
  const prefix = usePrefix('popover', prefixCls)
  const innerPrefix = concat(prefix, 'inner')

  function onTooltipVisibleChange(value: boolean) {
    onVisibleChange?.(value)
    setTooltipVisible(value)
  }

  return (
    <Tooltip
      title={
        <Inner
          title={title}
          icon={icon}
          content={content}
          prefix={innerPrefix}
          buttons={buttons}
          close={() => setTooltipVisible(false)}
        />
      }
      prefixCls={prefix}
      visible={tooltipVisible}
      onVisibleChange={onTooltipVisibleChange}
      {...rest}
    />
  )
}