import { ApiService } from "../util/apiService.js";

ko.components.register('ko-inputautocomplete', {
    viewModel: function (params) {
        var self = this;
        self.randomId = _h.createRandomNumber();
        self.id = "select-ul" + self.randomId;
        self.value = params.value;
        self.input = params.value;
        self.apiData = params.apiData;
        self.modelType = params.apiData.modelType;
        self.list = ko.observableArray();
        self.showMenu = ko.observable(false);
        self.controlName = ko.observable(params.name);
        self.parentForm = params.parent;
        self.getData = function () {
            var model = ko.toJS(self.apiData.model);
            ApiService.request(
                {
                    url: self.apiData.address,
                    data: model,
                    success: function (data) {
                        self.list(data);
                        self.buildList();
                        self.showMenu(true);
                    },
                    error: function (data) {

                    }
                });
        };
        self.onKeypress = function (model, evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode === 13) {
                setTimeout(
                    function () {
                        self.apiData.model.inputData.searchKey = self.input();
                        self.getData();
                    },
                    100);
            }
            return true;
        };
        self.onInputFocus = function (x, e) {
            var visList = $(".drp-menu:visible");
            if (visList && visList.length > 0) {
                for (var i = 0; i < visList.length; i++) {
                    if ($(visList[i]).attr("id") !== self.id) {
                        var target = ko.contextFor(visList[i]);
                        if (target && target.$data && target.$data["showMenu"])
                            target.$data.showMenu(false);
                    }
                }
            }
            if (self.list().length) {
                self.showMenu(true);
                self.buildList();
            }
        };
        self.onSelectItem = function (item) {
            var target = null;
            for (var i = 0; i < self.list().length; i++) {
                if (self.list()[i].id === item.id) {
                    target = self.list()[i];
                }
            }
            if (target) {
                self.input(target.na);
                self.showMenu(false);
                switch (self.modelType) {
                    case "node":
                        self.parentForm
                            .onNodeAutoSelect(self.controlName(), target);
                        break
                    case "company":
                        self.parentForm
                            .onCompanyAutoSelect(self.controlName(), target);
                        break

                }

            }
        };
        self.buildList = function () {
            var ul = document.getElementById(self.id);
            if (!ul)
                return;
            ul.innerHTML = "";
            var item, li, html, span, info;
            var list = ko.isObservable(self.list) ? self.list() : self.list;

            if (list.length === 0) {
                self.showMenu(false);
                return;
            }
            for (var i = 0; i < list.length; i++) {
                item = ko.toJS(list[i]);
                switch (self.modelType) {
                    default:
                    case "node":
                        li = _hh.createElement("li", ul);
                        li.setAttribute("data-id", item.id);
                        _hh.setClassName(li, "autocom-li");
                        span = _hh.createElement("span", li);
                        _hh.setClassName(span, "autocom-span");
                        _hh.setInnerHtml(span, item.na + " ( " + item.co + " )");
                        info = _hh.createElement("span", li);
                        _hh.setClassName(info, "autocom-path");
                        _hh.setInnerHtml(info, item.path);

                        break;
                    case "company":
                        li = _hh.createElement("li", ul);
                        li.setAttribute("data-id", item.id);
                        _hh.setClassName(li, "autocom-li");
                        span = _hh.createElement("span", li);
                        _hh.setClassName(span, "autocom-span");
                        _hh.setInnerHtml(span, item.na);
                        info = _hh.createElement("span", li);
                        _hh.setClassName(info, "autocom-path");
                        _hh.setInnerHtml(info, item.de);

                        break;

                }
                li.onclick = function () {
                    self.onSelectItem({
                        name: this.innerText,
                        id: Number(this.getAttribute("data-id"))
                    });
                };
            }
            setTimeout(function () {
                _h.fixItemHeight(self.id);
                var elements = $('[title]');
                $(elements).tooltip({ placement: 'top' });
            }, 100);
        };
    },
    template: '<input type="text" class="form-control key-on" autocomplete="off" data-bind="value: input,' +
        ' event:{keyup: onKeypress, focus: onInputFocus}, attr:{name: controlName}">' +
        '<ul class="autocom-ul select-ul drp-menu" data-bind="visible: showMenu, attr:{id : id}"></ul>'
});