import * as React from "react";
import { A11yTitleType, AlignSelfType, GridAreaType, MarginType } from "../../utils";

type SizeType = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string ;
type SideType = "top" | "left" | "bottom" | "right" | "horizontal" | "vertical" | "all" ;
type PadSizeType = "none" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string ;
type PadType = PadSizeType | {bottom?: PadSizeType,horizontal?: PadSizeType,left?: PadSizeType,right?: PadSizeType,top?: PadSizeType,vertical?: PadSizeType};
type BorderType = boolean | SideType | {color?: string | {dark?: string,light?: string},side?: SideType,size?: SizeType};

export interface ListProps {
  a11yTitle?: A11yTitleType;
  alignSelf?: AlignSelfType;
  as?: string;
  background?: string | string[] | { light: string | string[], dark: string | string[] };
  border?: BorderType;
  data?: string[] | {}[];
  gridArea?: GridAreaType;
  itemProps?: { [_:string]: { background?: string, border?: BorderType, pad?: PadType}};
  margin?: MarginType;
  onMore?: () => void;
  onClickItem?: (((event:React.MouseEvent) => void)) |  (((event: {item?: {}, index?: number }) => void));
  pad?: PadType;
  primaryKey?: string | ((...args: any[]) => any);
  secondaryKey?: string | ((...args: any[]) => any);
  step?: number;
}

declare const List: React.ComponentClass<ListProps & JSX.IntrinsicElements['ul']>;

export { List };