/// <reference types="react" />

import * as React from "react";

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  onClick?: any;
  onMouseEnter?: any;
  onMouseLeave?: any;
}

export interface TabPaneProps extends HTMLAttributesWeak {
  /**
   * 选项卡标题
   */
  tab?: any;

  /**
   * 单个选项卡是否可关闭
   */
  closeable?: boolean;

  /**
   * 单个选项卡的补充样式
   */
  tabStyle?: {};

  /**
   * 单个选项卡的附加样式类
   */
  tabClassName?: string;

  /**
   * 点击单个选项卡时触发的回调
   */
  onClick?: (key: string) => void;

  /**
   * 鼠标进入时触发的回调
   */
  onMouseEnter?: (key: string) => void;

  /**
   * 鼠标离开时出发的回调
   */
  onMouseLeave?: (key: string) => void;
}

export class TabPane extends React.Component<TabPaneProps, any> {}
interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  onChange?: any;
}

export interface TabProps extends HTMLAttributesWeak {
  /**
   * 样式前缀
   */
  prefix?: string;

  /**
   * 被激活的选项卡的 key（受控）
   */
  activeKey?: number | string;

  /**
   * 初始化时被激活的选项卡的 key（非受控）
   */
  defaultActiveKey?: number | string;

  /**
   * 类型
   */
  type?: "bar" | "wrapped" | "text" | "capsule";

  /**
   * 是否开启动效
   */
  animation?: boolean;

  /**
   * 多余项的展现方向
   */
  resDirection?: "horizontal" | "vertical";

  /**
   * 导航选项卡的位置，只适用于包裹型（wrapped）选项卡
   */
  tabPosition?: "top" | "bottom" | "left" | "right";

  /**
   * 尺寸
   */
  size?: "small" | "medium";

  /**
   * 是否可关闭选项卡，只支持 `bar` 和 `wrapped` 两种类型
   */
  closeable?: boolean;

  /**
   * 触发选项卡的方式
   */
  triggerType?: "hover" | "click";

  /**
   * 是否提前渲染好所有 TabPane 的内容
   */
  lazyLoad?: boolean;

  /**
   * 导航条的附加样式
   */
  navStyle?: {};

  /**
   * 内容区的附加样式
   */
  contentStyle?: {};

  /**
   * 导航栏附加内容
   */
  tabBarExtraContent?: React.ReactNode;

  /**
   * 选项卡发生切换时的事件回调
   */
  onChange?: (key: string) => void;

  /**
   * 选项卡被关闭时的事件回调
   */
  onClose?: (key: string, event: {}) => void;
}

export default class Tab extends React.Component<TabProps, any> {
  static TabPane: typeof TabPane;
}