import { StylableComponentProps } from '../theme'
import { FlexProps } from '../flex'

export interface TrayModel {
    [trayItem: string]: TrayItemModel
}

export interface TrayItemModel {
    open: boolean,
}

export interface TrayProps extends FlexProps {
    name: string
}

export type TrayPropsKey = keyof TrayProps;

export interface TrayItemProps extends FlexProps {
    name?: string
    icon?: string
    iconSize?: number
    text?: string
    active?: boolean
    disabled?: boolean
    stroke?: boolean
    input?: boolean
    dynamic?: boolean
    selected?: boolean
}

export type TrayItemPropsKey = keyof TrayItemProps;

export interface TrayOverflowProps extends StylableComponentProps {
    trayName: string
    align?: string
    width?: number
}

export interface TrayOverflowComponentProps extends TrayOverflowProps {
    trayItem: TrayItemModel
    align: string
    width: number
    openTrayItem: (trayName: string, itemname: string) => any
    closeTrayItem: (trayName: string, itemname: string) => any
    toggleTrayItem: (trayName: string, itemname: string) => any
}