(function ($) {
    "use strict";
    var pluginName = "SearchBar";
    var baseUrl = "https://www.playerauctions.com/";
    var _default = {};

    _default.settings = {
        showAlert: false,
        alertText: "",
        min: 2,
        total: 10
    }

    var SearchBar = function (element, options) {
        this.$element = $(element);
        this.$container = $(options.container);
        this.$wrapper = $(this.template.list);
        this.init(options);
    };
    SearchBar.prototype.template = {
        list: '<ul class="items-outer"></ul>',
        loading: '<p>loading...</p>'
    };
    SearchBar.prototype.init = function (options) {
        this.options = $.extend({}, _default.settings, options);
        this.render(this.options.data);
    };
    SearchBar.prototype.clickHandler = function (ele) {
        var _this = this;
        let filter = _this.$wrapper.children();

        let flt = $(ele);
        $(flt).on("keyup focus", _this.debounce(function () {
            var _flt = $.trim($(flt).val()).toLowerCase();

            let j = 0;
            if (filter.length > 0) {
                for (let i = 0; i < filter.length; i++) {

                    let data = $(filter[i]).attr('data-type');
                    if (_flt == '') {
                        _this.$wrapper.hide();
                        $('.mask-mob').removeClass('mask-mob-active');
                    } else {
                        if (_flt.length < _this.options.min) return;
                        $(filter[i]).hide();
                        $('.mask-mob').addClass('mask-mob-active');
                        _this.$wrapper.show();

                        if (data.indexOf(_flt) > 0) {
                            j += 1;
                            if (j <= _this.options.total) {
                                $(filter[i]).show();
                            }
                        } else {
                            $(filter[i]).hide();
                        }
                    }
                }
            } else {
                $('.mask-mob').removeClass('mask-mob-active');
            }
        }, 200));

        $('.mask-mob').click(function (event) {
            _this.$wrapper.hide();
            $('.mask-mob').removeClass('mask-mob-active');
        });
    };
    SearchBar.prototype.render = function (data) {
        if (data && data.length > 0) {
            this.$wrapper.empty();
            this.$container.empty().append(this.build(data));
        } else {
            this.$container.empty();
        }
    };
    SearchBar.prototype.build = function (data) {
        if (!data) return;
        var _data = data;
        var _this = this;

        $.each(_data, function (index, item) {
            var _item = '';

            var _json = {
                GameName: item.GameName.toLowerCase(),
                SEO: item.SEO.toLowerCase(),
                Aliases: item.Aliases.toLowerCase()
            }

            _item += "<li class=\"item text-link\" data-type='".concat(JSON.stringify(_json), "' style=\"display:none;\"><a href=\"").concat(baseUrl).concat(item.GameUrl, "/\">").concat(item.GameName, "</a></li>");

            _this.$wrapper.append(_item);
        });

        _this.clickHandler(_this.options.input);
        return _this.$wrapper;
    };
    SearchBar.prototype.debounce = function (func, delay) {
        let timer
        return (...args) => {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                func.apply(this, args)
            }, delay)
        }
    };
    $.fn[pluginName] = function (options) {
        var result;
        this.each(function () {
            $.data(this, pluginName, new SearchBar(this, options));
        });
        return result || this;
    };
})(jQuery);