import { EqContext, EqBroker, Widget } from '@easyquery/core'

import { AdvancedSearchView } from '@easyquery/ui'

import { EqServerBroker } from '@easyquery/broker-eqs'

import { JQueryColumnsPanelWidget } from '../widgets/jquery_columns_panel_widget'
import { JQueryQueryPanelWidget } from '../widgets/jquery_query_panel_widget'
import { JQueryEntitiesPanelWidget } from '../widgets/jquery_entities_panel_widget';

declare var jQuery: any;

export class AdvancedSearchViewJQuery extends AdvancedSearchView {

    private selectQueryMenu : any;

    constructor() {
        super();
    }        

    protected initDone(){
        this.selectQueryMenu = jQuery('<div></div>')
        .hide()
        .insertAfter(this.loadQueryButton);

        let menuOptions = {
            items: [],
            multiselect: false
        };

        this.selectQueryMenu.PopupMenu(menuOptions);
    }

    protected createDefaultBroker(context: EqContext) : EqBroker {
        return new EqServerBroker(context);
    }

    protected createEntitiesPanelWidget(entitiesPanelSlot : HTMLElement): Widget {
        return new JQueryEntitiesPanelWidget(entitiesPanelSlot);
    }

    protected createColumnsPanelWidget(columnsPanelSlot : HTMLElement) : Widget {
        return new JQueryColumnsPanelWidget(columnsPanelSlot);
    }

    protected createQueryPanelWidget(queryPanelSlot : HTMLElement) : Widget {
        return new JQueryQueryPanelWidget(queryPanelSlot);
    }

    protected fillLoadQueryButtonMenu(queryList: any, onQuerySelect: (queryId:string) => void) {
       
        let options = {
            anchor: this.loadQueryButton,
            items: [],
            onMenuItemSelected: function (evt, data) {
                onQuerySelect(data.menuItem.id);
                return false;
            }
        };

        for (let item of queryList){
            options.items.push({
                id: item.id,
                text: item.name
            });
        }

        this.selectQueryMenu.PopupMenu('showMenu', options);
    }
}
