import { DropdownOptions } from "./dropdown";

interface GridItem {
    value: any;
    displayValue: string;
}

interface GridSourceItem {
    value: string;
    text: string;
}

declare var GridColumn: {
    create(): HTMLElement;
    createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
    setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void;
    getValue(e: any): any;
    setStyle(element: HTMLElement, style: { [key: string]: string }): void;
    setEnabled(element: HTMLElement, enabled?: boolean): void;
}

interface GridColumnType {
    0: "Common";
    1: "Input";
    2: "Dropdown";
    3: "Checkbox";
    4: "Icon";
}

interface GridColumnDefinition {
    key?: string;
    type?: keyof GridColumnType | typeof GridColumn;
    caption?: string;
    width?: Number;
    align?: "left" | "center" | "right";
    enabled?: boolean | string | ((item: GridItem | any) => boolean);
    css?: { [key: string]: string };
    styleFilter?: (item: GridItem | any) => { [key: string]: string };
    textStyle?: { [key: string]: string };
    visible?: boolean;
    resizable?: boolean;
    sortable?: boolean;
    orderable?: boolean;
    allcheck?: boolean;
    events?: { [event: string]: any };
    attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
    // TODO: allowFilter?: boolean;
    filter?: (item: GridItem | any) => any;
    sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
    bgFilter?: (item: GridItem | any) => string;
    dropOptions?: DropdownOptions;
    source?: Array<any> | ((item: GridItem | any) => Array<any> | Promise<Array<GridSourceItem>>);
    iconType?: string;
    className?: string | ((item: GridItem | any) => string);
    text?: string;
    tooltip?: string;
    onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
    onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
}

interface GridColumnDirection {
    [-1]: Number,
    1: Number
}

interface GridColumnColumnEventMap {
    "reorder": string,
    "resize": string,
    "sort": string
}

interface Grid {
    columns: Array<GridColumnDefinition>;
    langs?: { all: string, ok: string, reset: string };
    virtualCount?: Number;
    rowHeight?: Number;
    extraRows?: Number;
    filterRowHeight?: Number;
    height?: Number;
    readonly?: boolean;
    multiSelect?: boolean;
    fullrowClick?: boolean;
    allowHtml?: boolean;
    holderDisabled?: boolean;
    headerVisible?: boolean;
    window?: Window
    sortIndex?: Number;
    sortDirection?: keyof GridColumnDirection;

    willSelect?: (index: Number, colIndex: Number) => boolean;
    selectedRowChanged?: (index?: Number) => void;
    cellDblClicked?: (index: Number, colIndex: Number) => void;
    cellClicked?: (index: Number, colIndex: Number) => boolean;
    rowDblClicked?: (index: Number) => void;
    columnChanged?: <K extends keyof GridColumnColumnEventMap>(type: K, index: Number, value: Number | keyof GridColumnDirection) => void;

    get source(): Array<GridItem | any>;
    set source(list: Array<GridItem | any>);
    get selectedIndexes(): Array<Number>;
    set selectedIndexes(indexes: Array<Number>);
    get loading(): boolean;
    set loading(flag: boolean);
    get scrollTop(): Number;
    set scrollTop(top: Number);

    readonly virtual: boolean;
    readonly sortKey: string | undefined;
    readonly selectedIndex: Number | -1;

    init(container?: HTMLElement): void;
    scrollToIndex(index: Number): void;
    resize(force?: boolean): void;
    reload(): void;
    refresh(): void;
    resetChange(): void;
    sortColumn(reload?: boolean): void;
}

declare var Grid: {
    ColumnTypes: {
        Common: 0,
        Input: 1,
        Dropdown: 2,
        Checkbox: 3,
        Icon: 4,
        isCheckbox(type: Number): boolean;
    };
    GridColumn: typeof GridColumn;
    new(container: HTMLElement): Grid;
}

export default Grid;