import * as React from 'react';
import { ITheme, IStyle } from '../../../Styling';
import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
import { IColor } from '../../../utilities/color/interfaces';
/**
 * {@docCategory ColorPicker}
 */
export interface IColorRectangle {
    /** Currently selected color. */
    color: IColor;
}
/**
 * {@docCategory ColorPicker}
 */
export interface IColorRectangleProps {
    /**
     * Gets the component ref.
     */
    componentRef?: IRefObject<IColorRectangle>;
    /**
     * Current color of the rectangle.
     */
    color: IColor;
    /**
     * Label of the ColorRectangle for the benefit of screen reader users.
     * @defaultvalue 'Saturation and brightness'
     */
    ariaLabel?: string;
    /**
     * Format string for the color rectangle's current value as read by screen readers.
     * The string must include descriptions and two placeholders for the current values:
     * `{0}` for saturation and `{1}` for value/brightness.
     * @defaultvalue `'Saturation {0} brightness {1}'`
     */
    ariaValueFormat?: string;
    /**
     * Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts
     * saturation and moving it vertically adjusts value (essentially, brightness).
     * @defaultvalue 'Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.'
     */
    ariaDescription?: string;
    /**
     * Minimum width and height.
     */
    minSize?: number;
    /**
     * Additional CSS class(es) to apply to the ColorRectangle.
     */
    className?: string;
    /**
     * Theme (provided through customization).
     */
    theme?: ITheme;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<IColorRectangleStyleProps, IColorRectangleStyles>;
    /**
     * Callback for when the color changes.
     */
    onChange?: (ev: React.MouseEvent | React.KeyboardEvent, color: IColor) => void;
}
/**
 * {@docCategory ColorPicker}
 */
export interface IColorRectangleStyleProps {
    /**
     * Theme (provided through customization).
     */
    theme: ITheme;
    /**
     * Additional CSS class(es) to apply to the ColorRectangle.
     */
    className?: string;
    /**
     * Minimum width and height.
     */
    minSize?: number;
}
/**
 * {@docCategory ColorPicker}
 */
export interface IColorRectangleStyles {
    /**
     * Style set for the root element.
     */
    root?: IStyle;
    /**
     * Style set for the light-colored rectangle.
     */
    light?: IStyle;
    /**
     * Style set for the dark-colored rectangle.
     */
    dark?: IStyle;
    /**
     * Style set for the draggable thumb element.
     */
    thumb?: IStyle;
    /**
     * Style for a hidden detailed description for screen reader users.
     */
    description?: IStyle;
}
