import * as React from 'react';

/**
 * The AccountBubble component
 * @public
 */
export declare class AccountBubble extends React.Component<AccountBubbleProps, any> {}

declare interface AccountBubbleProps {
    /** 
     * Ability to change the radius of the avatar.
     * */
    radius?: number,

    /** Change the fill color of the avatar. */
    fill?: string,

    /** Change the image of the avatar. */
    img? : string,

    /** The label that will be shown behind the avatar. */   
    label?: [object,string],

    /** The label color. */
    labelColor?: string,

    /** Used to fill in the acronym in the avatar. */
    name?: string
}

declare interface ButtonProps {
    /** Ability to disable the component. */
    disabled?: boolean,

    /** Uppercases the button text. */
    uppercase?: boolean,

    /** Ability to set the tabindex */
    tabindex?: number,

    /**
     * Called after user's click.
     * @returns event - React's original SyntheticEvent.
    */
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => React.MouseEvent<HTMLButtonElement>
}

/**
 * The Checkbox component
 * @public
 */
export declare class Checkbox extends React.Component<CheckboxProps, any> {}

declare interface CheckboxProps {
    /** The label that will be shown behind the checkbox. */   
    label?: string,

    /** Either sets or unsets the base state of the checkbox. */
    checked?: boolean,

    /** Ability to disable the component. */
    disabled?: boolean,

    /**
     * Called after user's click.
     * @returns returns the state of the checkbox as a boolean.
    */
   onChange?: (event: React.MouseEvent<HTMLButtonElement>) => boolean
}

/**
 * The ColorPicker component
 * @public
 */
export declare class ColorPicker extends React.Component<ColorPickerProps, any> {}

declare interface ColorPickerProps {
    /** The defaultvalue the colorpicker starts with. ( has to be hex color ) */   
    color?: string,

    /**
     * Called after user's changes color.
     * @returns returns the value of the current color as hex.
     * @returns returns the value of the current color as rgb.
    */
   onColorChange?: () => string & object
}

/**
 * The ConfirmDialog component
 * @public
 */
export declare class ConfirmDialog extends React.Component<ConfirmDialogProps, any> {}

declare interface ConfirmDialogProps extends DialogProps {
    /** 
     * An array of elements which will be presented in the bottom part of the dialog 
     *  */   
    footerButtons?: Array<string>,
}

/**
 * The ContainedButton component
 * @public
 */
export declare class ContainedButton extends React.Component<ContainedButtonProps, any> {}

declare interface ContainedButtonProps extends ButtonProps{
    /** Changes the background color of the button. */
    backgroundColor?: string
}

/**
 * The DatePicker component
 * @public
 */
export declare class DatePicker extends React.Component<DatePickerProps, any> {}

declare interface DatePickerProps {
    //startDay: DayOfWeek,


    /** Ability to show a circle around the current date. */
    showToday?: boolean,

    /**
     * Called after user changes the date.
    */
   onChange?: () => [object,number,number];
}

declare interface DialogProps {
    /** Title of the dialog */   
    title?: string,

    /** Description of the dialog */   
    description?: string,

    /** Flag for when the dialog is visible */   
    visible?: boolean,

    /** If true the dialog will show a cross which allows the user to close the dialog  
     * onClose will catch this click.
     * */   
    closable?: boolean,

    /** If it's set to true the user will not be able to dismiss the dialog by pressing on the overlay */   
    isBlocking?: boolean,

    /** The ability to move the dialog around */   
    movable?: boolean,

    /**
     * Called after user clicks on the overlay.
     * Depending if isBlocking is false.
    */
   onDismiss?: () => void;

    /**
     * Called after user clicks on close button.
     * Depending if closable is true.
    */
   onClose?: () => void;
}

/**
 * The Dropdown component
 * @public
 */
export declare class Dropdown extends React.Component<DropdownProps, any> {}

declare interface DropdownProps {

    /** The default selected key, the value will be put as the placeholder. */
    defaultKey: number,

    /** The options a user can choose from. */
    options: Array<object>,

    /** Shows a placeholder text. */
    placeHolder: string,

    /** Ability to put a line underneath the selected value. */
    underline: boolean,

    /**
     * Called after user chooses another option.
    */
    onKeySelected?: () => number;
}

declare interface GenericInputProps {
    /** The label of the input. */   
    label: string,

    /** The color of the label. */
    labelColor: string,

    /** A prefix put infront of the input. */   
    prefix: string,

    /** A prefix put behind the input. */   
    suffix: string,

    /** The color of the input. */   
    color: string,

    /** Allow to set autoComplete property */
    autoComplete: string,

    /** The name variable of the input */
    name: string,

    /** The defaultvalue of the input. */  
    defaultValue: string,

    /** The placeholder of the input. */  
    placeHolder: string,

    /** Ability to set an errormessage underneath the input. Will be set if required = true */  
    errorMessage:string,

    /** If this is true the label will be placed in uppercase */  
    uppercase: boolean,

    /** If the user lose focus of the input the user will know the input is required. */  
    required:boolean,

    /**
     * Called if the user changes the value of the input.
    */
    onChange?: () => [React.MouseEvent<HTMLButtonElement>, string|number];

    /**
     * Called after the input loses focus.
    */
    onBlur?: () => [React.MouseEvent<HTMLButtonElement>, string|number];

    /**
     * Called after the input receives focus.
    */
    onFocus?: () => React.MouseEvent<HTMLButtonElement>;
}

/**
 * The Input component
 * @public
 */
export declare class Input extends React.Component<InputProps, any> {}

declare interface InputProps extends GenericInputProps {
    /** Ability to change the type of the input. */   
    type: string,

    /** The value of the input. */ 
    value: string|number,
    
}

/**
 * The MonthPicker component
 * @public
 */
export declare class MonthPicker extends React.Component<MonthPickerProps, any> {}

declare interface MonthPickerProps {
    /**
     * Show the chosen month.
    */
    month?: object,

    /**
     * Show the chosen year.
    */
    year?: number,

    /**
     * Called after user changes the month.
    */
   onChange?: () => [object,number];
}

/**
 * The NumberInput component
 * @public
 */
export declare class NumberInput extends React.Component<NumberInputProps, any> {}

declare interface NumberInputProps extends GenericInputProps {
    /** The value of the input. */ 
    value: number,
    
}

/**
 * The OutlineButton component
 * @public
 */
export declare class OutlineButton extends React.Component<OutlineButtonProps, any> {}

declare interface OutlineButtonProps extends ButtonProps{
    /** Changes the border color of the button. */
    borderColor?: string
}

/**
 * The Pane component
 * @public
 */
export declare class Pane extends React.Component<PaneProps, any> {}

declare interface PaneProps {
    /** Title of the pane. */   
    title?: string,

    /** Description of the pane. */   
    description?: string,

    /** Flag for when the pane is visible. */   
    visible?: boolean,

    /** If true the pane will show a cross which allows the user to close the pane.
     * onClose will catch this click.
     * */   
    closable?: boolean,

    /** If it's set to true the user will not be able to dismiss the pane by pressing on the overlay.*/   
    isBlocking?: boolean,

    /** 
     * An array of elements which will be presented in the bottom part of the pane .
     *  */   
    footerButtons?: Array<string>,

    /** 
     * An array of elements which will be presented in the pane. 
     *  */  
    content: Array<string>,



    /**
     * Called after user clicks on the overlay.
     * Depending if isBlocking is false.
    */
   onDismiss?: () => void;

    /**
     * Called after user clicks on close button.
     * Depending if closable is true.
    */
   onClose?: () => void;
}

/**
 * The Switch component
 * @public
 */
export declare class Switch extends React.Component<SwitchProps, any> {}

declare interface SwitchProps {
    /** Ability to set a suffix whenever the switch is on. */
    activeSuffix: string,

    /** Ability to set a suffix whenever the switch is off. */
    inactiveSuffix: string,

    /** Ability to set the switch default on. */
    defaultChecked: boolean,
    //uppercase: boolean,

    /** Ability to set the color whenever the switch is on. */
    activeColor: string,

    /** Ability to set the color whenever the switch is off. */
    inactiveColor: string,

    /** Ability to set the style of the switch. */
    switchStyle: object,

    /**
     * Called after user changed the state.
    */
    onChange?: () => boolean;
}

/**
 * The Tag component
 * @public
 */
export declare class Tag extends React.Component<TagProps, any> {}

declare interface TagProps {
    /** Ability to set a text of the tag. */
    value: string|number,
    

    //color: string,

    /** If true the dialog will show a cross which allows the user to close the dialog  
     * onClose will catch this click.
     * */ 
    closable: boolean,

    /** Flag for when the dialog is visible */
    visible: boolean,

    /**
     * Called after user clicks on close button.
     * Depending if closable is true.
    */
    onClose?: () => void;
}

/**
 * The TextButton component
 * @public
 */
export declare class TextButton extends React.Component<TextButtonProps, any> {}

declare interface TextButtonProps extends ButtonProps{
     /** Changes the color of the text of the button. */
    textColor?: string,
}

export { }