import { StyledProps } from "../_type";

export interface TabsProps extends StyledProps {
  /**
   * 选项卡列表
   */
  tabs?: Tab[];

  /**
   * 是否在切换时销毁未激活的 TabPanel
   * @default true
   */
  destroyInactiveTabPanel?: boolean;

  /**
   * 当前选中的选项卡
   */
  activeId?: string;

  /**
   * 当用户激活指定选项卡时回调
   */
  onActive?: (tab: Tab, evt: React.SyntheticEvent) => void;

  /**
   * 默认选中的选项卡。
   * 如果已经提供了 `activeId`，此属性会被忽略。
   */
  defaultActiveId?: string;

  /**
   * 在 <Tabs /> 的子节点中：
   *
   * - 如果是 <TabPanel />，则只有 `tabId` 和当前 `activeId` 匹配的才会被渲染
   * - 如果是其它节点，会直接渲染
   */
  children?: React.ReactNode;

  /**
   * 自定义 TabBar 中项渲染
   *
   * @default children => <a>{children}</a>
   */
  tabBarRender?: (children: JSX.Element, tab: Tab) => JSX.Element;

  /**
   * 自定义 TabBar 样式
   */
  tabBarStyle?: React.CSSProperties;

  /**
   * 是否开启切换带动画效果
   * @default true
   */
  animated?: boolean;

  /**
   * 选项卡书签位置
   * @default "top"
   */
  placement?: "top" | "left";

  /**
   * 是否使用 ceiling 样式（搭配 Layout 使用）
   * @default
   */
  ceiling?: boolean;

  /**
   * 在选项卡后可选的内容。可以附加跳转按钮、操作按钮等
   */
  addon?: React.ReactNode;

  /**
   * 垂直（`placement = "left"`）时选项卡容器的最大高度
   */
  maxHeight?: number;

  /**
   * 选项卡超出宽度产生滚动时，是否自动滚动至当前选中项
   * @default true
   * @since 2.7.0
   */
  activeTabAutoScrollIntoView?: boolean;

  /**
   * 禁用tab滚动条。在特殊分辨率或浏览器，当tab个数较少时仍出现tab滚动条，可使用该选项禁用滚动条
   * @default false
   */
  disableTabScrolling?: boolean;
}

export interface Tab {
  /**
   * 选项卡标签 ID
   */
  id: string;

  /**
   * 选项卡标签内容
   */
  label: React.ReactNode;

  /**
   * 如果提供了关闭回调处理函数，则选项卡会渲染关闭按钮，点击时调用
   */
  onClose?: (tab: Tab, event: React.SyntheticEvent) => void;

  /**
   * 禁用当前选项卡
   * @default false
   */
  disabled?: boolean;

  /**
   * 选项卡标签自定义类名
   * @since 2.7.0
   */
  className?: string;

  /**
   * 选项卡标签自定义样式
   * @since 2.7.0
   */
  style?: React.CSSProperties;
}