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

export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'
export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
export type FabGap = Partial<Record<FabDirection, number>>
export const fabProps = {
  ...baseProps,
  /**
   * 是否激活
   */
  active: makeBooleanProp(false),
  /**
   * 类型，可选值为 default primary info success warning error
   */
  type: makeStringProp<FabType>('primary'),
  /**
   * 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom left-center right-center top-center bottom-center
   */
  position: makeStringProp<FabPosition>('right-bottom'),
  /**
   * 悬浮按钮菜单弹出方向，可选值为 top bottom left right
   */
  direction: makeStringProp<FabDirection>('top'),
  /**
   * 是否禁用
   */
  disabled: makeBooleanProp(false),
  /**
   * 悬浮按钮未展开时的图标
   */
  inactiveIcon: makeStringProp('add'),
  /**
   * 悬浮按钮展开时的图标
   */
  activeIcon: makeStringProp('close'),
  /**
   * 自定义悬浮按钮层级
   */
  zIndex: makeNumberProp(99),
  /**
   * 是否可拖动
   */
  draggable: makeBooleanProp(false),
  gap: {
    type: Object as PropType<FabGap>,
    default: () => ({})
  },
  /**
   * 用于控制点击时是否展开菜单
   */
  expandable: makeBooleanProp(true)
}

export type FabProps = ExtractPropTypes<typeof fabProps>

export type FabExpose = {
  // 展开菜单
  open: () => void
  // 收起菜单
  close: () => void
}

export type FabInstance = ComponentPublicInstance<FabProps, FabExpose>