import type { ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'

export type PlacementType =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

export type PopoverMode = 'menu' | 'normal'

export const popoverProps = {
  ...baseProps,
  customArrow: makeStringProp(''),
  customPop: makeStringProp(''),
  /**
   * 是否显示 popover 箭头
   */
  visibleArrow: makeBooleanProp(true),
  /**
   * 显示的内容，也可以通过 slot#content 传入
   */
  content: [String, Object] as PropType<string | Record<string, any>[]>,
  /**
   * 指定 popover 的放置位置：top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
   */
  placement: makeStringProp<PlacementType>('bottom'),
  /**
   * 偏移量
   */
  offset: makeNumberProp(0),
  /**
   * 是否使用内容插槽
   */
  useContentSlot: makeBooleanProp(false),
  /**
   * 是否禁用 popover
   */
  disabled: makeBooleanProp(false),
  /**
   * 是否显示关闭按钮
   */
  showClose: makeBooleanProp(false),
  /**
   * 控制 popover 的显示状态
   */
  modelValue: makeBooleanProp(false),
  /**
   * 当前显示的模式，决定内容的展现形式，可选值：normal（普通模式）/ menu（菜单模式）
   */
  mode: makeStringProp<PopoverMode>('normal')
}

export type PopoverProps = ExtractPropTypes<typeof popoverProps>

export type PopoverExpose = {
  // 打开popover
  open: () => void
  // 关闭popover
  close: () => void
}