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

import * as React from "react";

export interface RowProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

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

  /**
   * 行内容
   */
  children?: React.ReactNode;

  /**
   * 布局方式 <br><br>**可选值**:<br>'fluid'(流体布局，仅设置最大宽度，宽度为各断点值，两侧根据分辨率情况自动留白)<br>'fixed'(固定宽度布局)<br>'wrap'(单行模式，列在行中宽度溢出后换行)<br>'no-wrap'(单行模式，列在行中宽度溢出后不换行)<br>'no-padding'(行边距以及所有列间距都为0)<br>'across'(通栏模式, 行边距为0)<br>'fixed'/'fluid', 'wrap'/'no-wrap', 'no-padding', 'across'可组合使用，例如: ['fixed', 'wrap', 'no-padding', 'across']
   */
  type?: string | Array<any>;

  /**
   * 固定宽度布局，指定固定宽度值后不再受断点值影响而变动
   */
  fixedWidth?: "xxs" | "xs" | "s" | "m" | "l" | "xl";

  /**
   * (不支持IE9及以下浏览器)多列垂直方向对齐方式
   */
  align?: "top" | "center" | "bottom" | "baseline" | "stretch";

  /**
   * (不支持IE9及以下浏览器)行内具有多余空间时的布局方式
   */
  justify?: "start" | "center" | "end" | "space-between" | "space-around";
}

export class Row extends React.Component<RowProps, any> {}

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

export interface ColProps extends HTMLAttributesWeak {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

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

  /**
   * 列内容
   */
  children?: React.ReactNode;

  /**
   * 列宽度<br><br>**可选值**:<br>1, 2, 3, ..., 22, 23, 24
   */
  span?: string | number;

  /**
   * 固定列宽度，宽度值为20 * 栅格数<br><br>**可选值**:<br>1, 2, 3, ..., 28, 29, 30
   */
  fixedSpan?: string | number;

  /**
   * （不支持IE9及以下浏览器）列偏移<br><br>**可选值**:<br>1, 2, 3, ..., 22, 23, 24
   */
  offset?: string | number;

  /**
   * （不支持IE9及以下浏览器）固定列偏移，宽度值为20 * 栅格数<br><br>**可选值**:<br>1, 2, 3, ..., 28, 29, 30
   */
  fixedOffset?: string | number;

  /**
   * (不支持IE9及以下浏览器)多列垂直方向对齐方式，可覆盖Row的align属性
   */
  align?: "top" | "center" | "bottom" | "baseline" | "stretch";

  /**
   * 列在不同断点下的显示与隐藏<br><br>**可选值**:<br>true(在所有断点下隐藏)<br>false(在所有断点下显示)<br>'xs'(在 xs 断点下隐藏）<br>['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏）
   */
  hidden?: boolean | string | Array<any>;

  /**
   * >=320px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象
   */
  xxs?: string | number | {};

  /**
   * >=480px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象
   */
  xs?: string | number | {};

  /**
   * >=720px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象
   */
  s?: string | number | {};

  /**
   * >=990px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象
   */
  m?: string | number | {};

  /**
   * >=1200px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象
   */
  l?: string | number | {};

  /**
   * >=1500px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象
   */
  xl?: string | number | {};
}

export class Col extends React.Component<ColProps, any> {}
export interface GridProps extends React.HTMLAttributes<HTMLElement> {}

export default class Grid extends React.Component<GridProps, any> {
  static Row: typeof Row;
  static Col: typeof Col;
}