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

import AtComponent from './base'

export interface TabItem {
  /**
   * 标题
   */
  title/*;标题*/: string
}

export interface AtTabsProps extends AtComponent {
  /**
   * Tab 方向，请跟 AtTabPane 保持一致
   * @default 'horizontal'
   */
  tabDirection/*;标签方向*/?: 'horizontal'/*;水平*/ | 'vertical'/*;垂直*/
  /**
   * Tab 高度，当 tabDirection='vertical' 时，需要设置；
   * 当 tabDirection='horizontal' 时，会自动根据内容撑开，请勿设置
   */
  height/*;高*/?: string
  /**
   * 当前选中的标签索引值，从 0 计数，开发者需要通过 onClick 事件来改变 current，从而切换 tab
   * @default 0
   */
  current/*;当前*/: number
  /**
   * 是否滚动，当标签太多时，建议使用。否则会出现部分标签被隐藏
   * @default false
   */
  scroll/*;滚动*/?: boolean
  /**
   * 是否开启切换动画
   * @default true
   */
  animated/*;动画*/?: boolean
  /**
   * 是否支持手势滑动切换内容页，当 tabDirection='vertical' 时，无论是否设置，都不支持手势滑动切换内容页
   * @default true
   */
  swipeable/*;可滑动*/?: boolean
  /**
   * tab 列表
   */
  tabList/*;标签集*/: TabItem[]
  /**
   * 点击或滑动时触发事件
   */
  onClick/*;当点*/: (index: number, event: CommonEvent) => void
}

export interface AtTabsState {
  _scrollLeft/*;_滚动左*/: number
  _scrollTop/*;_滚动上*/: number
  _scrollIntoView/*;_滚动进视图*/: string
}

declare const AtTabs: ComponentClass<AtTabsProps>

export default AtTabs