// unsure why this wasn't previously needed
// TODO remove need for anys
// tslint:disable no-any

import {
  StyledComponentClass,
  StyledFunction,
  Styles,
} from 'styled-components';
import * as React from 'react';

export interface LogoProps {
  /** defaults to 4rem */
  height: string;
  altColor?: boolean;
}

export const Logo: React.ComponentClass<LogoProps>;

/**
 * @todo Remove once installed React is upgraded (it's part of the new
 * definitions).
 */
export type CSSWideKeyword = 'initial' | 'inherit' | 'unset';
export interface HeadingProps {
  /** defaults to `h1` */
  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  size?: 'snail' | 'mouse' | 'otter' | 'mammoth' | 'dolphin' | 'hippo';
  children: React.ReactNode;
  id?: string;
  fontWeight?:
    | CSSWideKeyword
    | 'normal'
    | 'bold'
    | 'bolder'
    | 'lighter'
    | 100
    | 200
    | 300
    | 400
    | 500
    | 600
    | 700
    | 800
    | 900;
}

export const Heading: React.ComponentClass<HeadingProps>;

export type TableRow = (number | string | boolean)[];

export interface TableProps {
  /** each row should have the same amount of elements */
  rows?: TableRow[];
  headers?: string[];
  /** sets first cell of each row to be used as a row header */
  rowHeaders?: true;
  /** You should _either_ include a caption or precede the table with a heading of the correct level. */
  caption?: string;
}

export const Table: React.ComponentClass<TableProps>;

export interface VspaceProps {
  padding?: boolean;
  spaceSize?:
    | 'moon' /** -12 */
    | 'mars' /** -6 */
    | 'earth' /** 0 */
    | 'saturn' /** 6 */
    | 'sun' /** sun */;
  children: React.ReactNode;
}
export const Vspace: React.ComponentClass<VspaceProps>;

export interface SectionProps {
  curvedTop?: boolean;
  curvedBottom?: boolean;
  /** defaults to palette.greyScale.white */
  backgroundColor?: string;
  /** when backgroundColor is unset defaults to palette.brand.blue otherwise palette.brand.white */
  textColor?: string;
  children: React.ReactNode;
}

export const Section: React.ComponentClass<SectionProps>;

export interface IconProps {
  color?: string;
  size?: 'moon' | 'mars' | 'earth' | 'saturn' | 'sun';
  name:
    | 'account'
    | 'call'
    | 'card'
    | 'chat'
    | 'close'
    | 'down'
    | 'download'
    | 'elec'
    | 'email'
    | 'emergencies'
    | 'facebook'
    | 'forward'
    | 'gas'
    | 'home'
    | 'instagram'
    | 'left'
    | 'meter'
    | 'move'
    | 'ok'
    | 'payments'
    | 'refer'
    | 'right'
    | 'rosette'
    | 'statement'
    | 'tick'
    | 'twitter'
    | 'usage'
    | 'warning'
    | 'youtube';
}

export const Icon: React.ComponentClass<IconProps>;

export interface StepsToCompleteProps {
  label: string;
  current: number;
  children: React.ReactNode;
}

export interface StepsToCompleteStepProps {
  label: string;
}

export const StepsToComplete: React.ComponentClass<StepsToCompleteProps> & {
  Step: React.ComponentClass<StepsToCompleteStepProps>;
};


export interface TextProps {
  size?: string;
  bold?: boolean;
  color?: string;
  inline?: boolean;
  spacing?: string;
  href?: string;
  level?: string;
  maxWidth?: string;
  marginCentre?: string;
  textAlign?: string;
}

export const Text: React.ComponentClass<TextProps>;

export const palette: any;
export const space: any;
export const type: any;
export const focusStyle: any;


export interface Media {
  mobileOnly: (
    ...args: any[]
  ) => (string | number | Styles | StyledComponentClass<any, any, any>)[];
  tabletAndUp: (
    ...args: any[]
  ) => (string | number | Styles | StyledComponentClass<any, any, any>)[];
  singleColumn: (
    ...args: any[]
  ) => (string | number | Styles | StyledComponentClass<any, any, any>)[];
  tabletAndDown: (
    ...args: any[]
  ) => (string | number | Styles | StyledComponentClass<any, any, any>)[];
  desktopAndUp: (
    ...args: any[]
  ) => (string | number | Styles | StyledComponentClass<any, any, any>)[];
  smallAndDown: (
    ...args: any[]
  ) => (string | number | Styles | StyledComponentClass<any, any, any>)[];
  mediumAndUp: (
    ...args: any[]
  ) => (string | number | Styles | StyledComponentClass<any, any, any>)[];
}

export const media: Media;