import { XY } from "@thegraid/common-lib";
import { MouseEvent, Rectangle, Shape, Text } from "@thegraid/easeljs-module";
import { ChoiceItem, ChoiceStyle, Chooser } from "./chooser.js";
import { NamedContainer } from "./named-container.js";
/**
 * Items in a DropdownChoice.items array
 */
export interface DropdownItem extends ChoiceItem {
    /** text displayed when Item is expanded (& _rootButton.text when selected) */
    text: string;
    /** value associated, if different from text */
    value: any;
    /** DisplayObject-Container holding Text (and mouse actions, etc.) */
    button?: DropdownButton;
}
export interface DropdownStyle extends ChoiceStyle {
    fillColor?: string;
    fillColorOver?: string;
    textColor?: string;
    textColorOver?: string;
    fontSize?: number;
    fontName?: string;
    textAlign?: string;
    rootColor?: string;
    rootColorOver?: string;
    rootTextColor?: string;
    rootTextColorOver?: string;
    /** for 2.5D push into screen: offset by a few pixels */
    pressdown?: XY;
    arrowColor?: string;
    spacing?: number;
}
export declare class DropdownButton extends NamedContainer {
    static defaultStyle: DropdownStyle;
    style: DropdownStyle;
    text: Text;
    fontSize: number;
    fontName: string;
    textAlign: string;
    parent: DropdownChoice;
    pressed: boolean;
    hover: boolean;
    shape: Shape;
    w: number;
    h: number;
    r: number;
    _arrowShape: Shape;
    _arrowWidth: number;
    /** handle click of selected Item. _itemClick(item) OR rootButton._dropdown() */
    click(handler: (item: DropdownItem) => void): void;
    /**
     * @param style selected overrides
     * @param defStyle all the default style values
     * @returns copy of defStyle with overrides from style
     */
    static mergeStyle(style: DropdownStyle, defStyle?: DropdownStyle): {
        fillColor?: string;
        fillColorOver?: string;
        textColor?: string;
        textColorOver?: string;
        fontSize?: number;
        fontName?: string;
        textAlign?: string;
        rootColor?: string;
        rootColorOver?: string;
        rootTextColor?: string;
        rootTextColorOver?: string;
        pressdown?: XY;
        arrowColor?: string;
        spacing?: number;
    };
    get arrow_c(): string;
    get arrow_r(): number;
    get arrow_w(): number;
    /**
     * Contains a rectangular Shape, a Text|TextBox and maybe an Arrow.
     * @param text supply "" to designate the _rootButton to make an Arrow
     * @param w for RoundedRectangle
     * @param h for RoundedRectangle
     * @param r for RoundedRectangle
     * @param click handler for click(item)=>void
     * @param style all the param for DropdownStyle
     * @param style.fontSize default 16
     * @param style.fontName default F.defaultFont
     * @param style.textAlign default 'left'
     */
    constructor(text: string, w: number, h: number, r: number, click?: (e: any) => any, style?: DropdownStyle);
    /** update shape.graphics to show background/rectangle */
    render(): void;
    initText(text: string): void;
    onClick(handler: (eventObj: Object) => boolean): void;
}
/**
 * A DropdownMenu, with DropdownItem[], one of which may be 'selected'.
 * When the selected Item changes, the onItemChanged method/function is invoked.
 *
 * a "DropdownChooser"
 */
export declare class DropdownChoice extends Chooser {
    items: DropdownItem[];
    _boundsCollapsed: Rectangle;
    _boundsExpand: Rectangle;
    _expand: boolean;
    _selected: DropdownItem;
    _index: number;
    _rootButton: DropdownButton;
    /** show or hide all the item.button(s)
     * @param expand true to toggle state, false to collapse
     */
    protected dropdown(expand?: boolean): void;
    enable(): void;
    /** @return true if mouseEvent is over this Dropdown */
    isMouseOver(e: MouseEvent): boolean;
    /**
     * Show rootButton (value & triangle) or expand to show DropdownItem[] of values.
     * @param items {text: "show this"}
     * @param item_w width of item box (include: text width + space for arrow)
     * @param item_h height of each DropdownButton
     * @param style size and colors applied to each DropdownButton
     */
    constructor(items: DropdownItem[], item_w: number, item_h: number, style?: DropdownStyle);
    rootclick(): void;
    itemclick(item: DropdownItem): void;
    /**
     * get or change the selected item.
     * @param item item to select; or null to return currently selected item
     * @returns selected item
     */
    select(item: DropdownItem): DropdownItem;
    /** alternate to select(item); selectItem by index */
    selectAt(index: number): DropdownItem;
}
/** auto-select next item in cycle. */
export declare class CycleChoice extends DropdownChoice {
    rootclick(): void;
}
/** present [false, true, ...] with any pair of string: ['false', 'true', ...] */
export declare class BoolChoice extends CycleChoice {
    /** typically: items.length == 2 */
    constructor(items: DropdownItem[], item_w: number, item_h: number, style?: DropdownStyle);
}