import type { ExtractPropTypes } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
import type { DirectionType, IndicatorPositionType } from '../wd-swiper/types'

/**
 * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
 */
export type SwiperIndicatorType = 'dots' | 'dots-bar' | 'fraction'

export const swiperNavprops = {
  ...baseProps,
  /**
   * 当前轮播在哪一项（下标）
   */
  current: makeNumberProp(0),
  /**
   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
   */
  direction: makeStringProp<DirectionType>('horizontal'),
  /**
   * 小于这个数字不会显示导航器
   */
  minShowNum: makeNumberProp(2),
  /**
   * 指示器位置
   */
  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
  /**
   * 是否显示两侧的控制按钮
   */
  showControls: makeBooleanProp(false),
  /**
   * 总共的项数
   */
  total: makeNumberProp(0),
  /**
   * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
   */
  type: makeStringProp<SwiperIndicatorType>('dots'),
  /**
   * 指示器活动颜色
   */
  activityColor: makeStringProp('var(--wot-color-theme)'),
  /**
   * 指示器非活动颜色
   */
  inactiveColor: makeStringProp('#e7e7e7'),
}

export type SwiperNavProps = ExtractPropTypes<typeof swiperNavprops>