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

import * as React from "react";

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

export interface ItemProps extends HTMLAttributesWeak {
  /**
   * 组件的样式品牌前缀
   */
  prefix?: string;

  /**
   * 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`
   */
  status?: "wait" | "process" | "finish";

  /**
   * 标题
   */
  title?: React.ReactNode;

  /**
   * 图标
   */
  icon?: string;

  /**
   * 内容，用于垂直状态下的内容填充
   */
  content?: React.ReactNode;

  /**
   * StepItem 的自定义渲染
   */
  itemRender?: (index: number, status: string) => React.ReactNode;

  /**
   * 百分比
   */
  percent?: number;

  /**
   * 是否禁用
   */
  disabled?: boolean;

  /**
   * 点击步骤时的回调
   */
  onClick?: (index: number) => void;

  /**
   * 自定义样式
   */
  className?: string;
}

export class Item extends React.Component<ItemProps, any> {}
export interface StepProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式的品牌前缀
   */
  prefix?: string;

  /**
   * 当前步骤
   */
  current?: number;

  /**
   * 展示方向
   */
  direction?: "horizontal" | "vertical";

  /**
   * 类型
   */
  type?: "circle" | "arrow" | "dot";

  /**
   * 是否只读模式
   */
  readOnly?: boolean;

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

  /**
   * 自定义样式名
   */
  className?: string;
}

export default class Step extends React.Component<StepProps, any> {
  static Item: typeof Item;
}