interface KnockoutBindingHandlers {
    searchTextBox: KnockoutBindingHandler;
}

module ssp {
    export interface ISearchTextBoxProvider {
        getProposedItems(enteredText: string): JQueryPromise<any[]>;
        getIDByNameID(nameID: string): JQueryPromise<any>;
        getNameIDByID(id: any): JQueryPromise<string>;
        valueKey?: string;
        displayKey?: string;
    }

    var searchTextBoxNameCounter = 0;

    ko.bindingHandlers.searchTextBox = {
        init: (element: HTMLElement, valueAccessor: () => any, allBindings: KnockoutAllBindingsAccessor, viewModel, bindingContext: KnockoutBindingContext) => {
            if (element.nodeName.toLowerCase() != "input")
                throw "element.nodeName.toLowerCase() != \"input\"";

            var $element = $(element);
            var binding = valueAccessor();            
            var provider: ISearchTextBoxProvider = binding.provider;

            if (!provider)
                throw "!provider";

            var valueKey: string = binding.provider.valueKey || "ID";
            var displayKey: string = binding.provider.displayKey || "Caption";            
            var value: KnockoutObservable<any> = binding.value;

            if (!ko.isObservable(value))
                throw "!ko.isObservable(value)";            

            value.extend({ notify: "always" });

            var getProposedItemsCounter = 0;
            var getIDByNameIDCounter = 0;
            var getNameIDByIDCounter = 0;

            $element.typeahead(
                { highlight: true },
                {
                    name: "ssp-searchTextBox-" + (++searchTextBoxNameCounter),
                    displayKey: displayKey,
                    source: (enteredText, callback) => {
                        var c = ++getProposedItemsCounter;

                        provider.getProposedItems(enteredText)
                            .done(r => {
                                if (c != getProposedItemsCounter)
                                    return;

                                callback(r);
                            });
                    }
                });

            $element.on("typeahead:selected", (s, item, name) => {
                value(item ? item[valueKey] : null);
            });

            $element.focusout(() => {
                if ($element.val()) {
                    var c = ++getIDByNameIDCounter;

                    provider.getIDByNameID($element.val())
                        .done(r => {
                            if (c != getIDByNameIDCounter)
                                return;

                            value(r);
                        })
                        .fail(r => {
                            if (c != getIDByNameIDCounter)
                                return;

                            value(null);
                        });
                } else
                    value(null);
            });

            var updateFromValue = ko.computed(() => {
                var v = value();

                if (v) {
                    var c = ++getNameIDByIDCounter;

                    provider.getNameIDByID(v)
                        .done(r => {
                            if (c != getNameIDByIDCounter)
                                return;

                            $element.typeahead("val", r);
                        });
                } else
                    $element.typeahead("val", "");
            });

            ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
                $element.typeahead("destroy");
                updateFromValue.dispose();
            });

            ko.applyBindingsToNode(element, { validationElement: value }, viewModel);

            return { controlsDescendantBindings: true };
        }
    };
}