import { MouseEvent, ComponentClass } from 'react'
import { CommonEvent } from '@tarojs/components/types/common'

import AtComponent from './base'

export interface TabItem {
  /**
   * text 可显示的最大数字，超过则显示最大数字加'+'，如'99+'
   */
  max/*;最大*/?: number
  /**
   * 是否显示红点，优先级比 text 高
   * @default false
   */
  dot/*;点*/?: boolean
  /**
   * 右上角显示到文本，可以为数字或文字，如果有 dot，优先显示 dot
   */
  text/*;文本*/?: string | number
  /**
   * 标题
   */
  title/*;标题*/: string
  /**
   * icon className 前缀，用于第三方字体图标库，
   * 比如想使用'fa fa-clock' 的图标，则传入 iconPrefixClass='fa' iconType='clock'，
   * 参考[拓展图标库详细](https://taro-ui.aotu.io/#/docs/icon)
   */
  iconPrefixClass/*;图片样式类前缀*/?: string
  /**
   * 未选中时展示的 icon 类型，可扩展第三方字体图标库，
   * 参考[拓展图标库详细](https://taro-ui.aotu.io/#/docs/icon)
   */
  iconType/*;图标类型*/?: string
  /**
   * 选中时展示的 icon 类型，可扩展第三方字体图标库，
   * 参考[拓展图标库详细](https://taro-ui.aotu.io/#/docs/icon)
   */
  selectedIconType/*;选择图标类型*/?: string
  /**
   * 未选中时图片 icon 的链接
   */
  image/*;图片*/?: string
  /**
   * 选中时图片 icon 的链接
   */
  selectedImage/*;选中图片*/?: string
}

export interface AtTabBarProps extends AtComponent {
  /**
   * 是否固定底部
   * @default false
   */
  fixed/*;固定*/?: boolean
  /**
   * 背景颜色
   * @default #fff
   */
  backgroundColor/*;背景色*/?: string
  /**
   * 当前选中的标签索引值，从 0 计数
   * @default 0
   */
  current/*;当前*/: number
  /**
   * 图标大小
   * @default 24
   */
  iconSize/*;图标大小*/?: number
  /**
   * 字体大小
   * @default 14
   */
  fontSize/*;字号*/?: number
  /**
   * 未选中标签字体与图标颜色
   * @default #333
   */
  color/*;颜色*/?: string
  /**
   * 选中标签字体与图标颜色
   * @default #6190E8
   */
  selectedColor/*;选中颜色*/?: string
  /**
   * tab 列表
   */
  tabList/*;标签集*/: TabItem[]
  /**
   * 点击触发事件，开发者需要通过 onClick 事件来更新 current 值变化，onClick 函数必填
   */
  onClick/*;当点*/: (index: number, event: CommonEvent) => void
}

declare const AtTabBar: ComponentClass<AtTabBarProps>

export default AtTabBar