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

import * as React from "react";

export interface ItemProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式前缀
   */
  prefix?: string;

  /**
   * label 标签的文本
   */
  label?: React.ReactNode;

  /**
   * label 标签布局，通 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效
   */
  labelCol?: {};

  /**
   * 提示信息，如不设置，则会根据校验规则自动生成. 如果设置会受控（ps: 可以利用这点自定义错误位置,详细看demo自定义错误)
   */
  help?: React.ReactNode;

  /**
   * 校验状态，如不设置，则会根据校验规则自动生成
   */
  validateStatus?: "" | "success" | "error" | "loading";

  /**
   * 配合 validateStatus 属性使用，是否展示校验状态图标, 目前只有Input支持
   */
  hasFeedback?: boolean;

  /**
   * 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
   */
  wrapperCol?: {};

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面
   */
  extra?: React.ReactNode;

  /**
   * 单个FormItem的size自定义，优先级高于Form的size, 并且当组件与 FormItem 一起使用时，组件自身设置 size 属性无效。
   */
  size?: "" | "large" | "small" | "medium";

  /**
   * 扩展class
   */
  className?: string;
}

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

  /**
   * 表单展示方向
   */
  direction?: "hoz" | "ver";

  /**
   * 单个FormItem的size自定义，优先级高于Form的size, 并且当组件与 FormItem 一起使用时，组件自身设置 size 属性无效。
   */
  size?: "large" | "medium" | "small";

  /**
   * 标签的位置
   */
  labelAlign?: "top" | "left" | "inset";

  /**
   * 标签的左右对齐方式
   */
  labelTextAlign?: "" | "left" | "right";

  /**
   * 经 `new Field(this)` 初始化后，直接传给 Form 即可 用到表单校验则不可忽略此项
   */
  field?: any;

  /**
   * form内有 `htmlType="submit"` 的元素的时候会触发
   */
  onSubmit?: () => void;

  /**
   * 子元素
   */
  children?: any;

  /**
   * 扩展class
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;
}

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