/*jshint esversion: 6 */

(function($) {

    $.fn.autocompleteEmail = function(options) {
        var settings = $.extend({
            domains: [
                "gmail.com",
                "hotmail.com",
                "yahoo.com",
                "outlook.com",
                "uol.com.br",
                "live.com",
                "googlemail.com"
            ],
            list_class: "list_domains"
        }, options );


        var directional_keys = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"],
            selected_node = null;


        function getSuggestions(str) {
            var str_arr = str.split("@");
            if (str_arr.length > 1) {
                str = str_arr.pop();
                if (!str.length) {
                    return "";
                }
            } else {
                return "";
            }

            var matches = settings.domains.filter(function (domain) {
                return domain.indexOf(str) === 0;
            });

            return matches;
        }


        function rebuildDatalist(items, inputted_domain) {
            var new_list = settings.domains.filter(d => items.includes(d));

            if(new_list.length == 0) {
                if(!inputted_domain) {
                    new_list = settings.domains;
                } else {
                    new_list = [];
                }
            }

            var list = $("." + settings.list_class).find(".list");
            list.empty();
            new_list.forEach(domain => {
                var item = $("<li />");
                item.addClass("domain-item");
                item.text("@" + domain);
                item.attr("data-domain", domain);
                list.append(item);
            });

            return new_list;
        }


        function highlight(value) {
            var list = $("." + settings.list_class).find(".list");

            $(list).find("li").each(function(i, li) {
                var domain = $(li).text(),
                    current_domain = "@" + value.split("@")[1],
                    index = domain.indexOf(current_domain);

                if(index >= 0) {
                    var text = domain.substr(0, index) + "<strong class='highlight'>" + domain.substr(index, index + current_domain.length) + "</strong>" + domain.substr(index + current_domain.length);
                    $(li).html(text);
                }
            });
        }


        return this.each(function(i, el) {
            // Build list positioned on input
            var wrapper = $("<div />");
            wrapper.addClass(settings.list_class).addClass("datalist_domains");

            var list = $("<ul />");
            list.addClass("list");
            settings.domains.forEach(domain => {
                var item = $("<li />");
                item.addClass("domain-item");
                item.text("@" + domain);
                item.attr("data-domain", domain);
                list.append(item);
            });

            wrapper.append(list);

            $(el).after(wrapper);
            $(el).parent().css("position", "relative");


            $(el).on("keyup", function(e) {
                var _value = $(el).val(),
                    occurences_of_at = _value.split("@").length - 1,
                    suggestions = getSuggestions(_value),
                    inputted_domain = _value.split("@").filter(x => x != "").length > 1;

                if($.inArray(e.key, ["Enter", "ArrowRight"]) != -1) {
                    e.preventDefault();

                    var list = $("." + settings.list_class).find(".list"),
                        current_selected = $(list).find("li").eq(selected_node);

                    if(selected_node != null) {
                        var selected_domain = $(current_selected).data("domain"),
                            current_domain = _value.split("@")[1],
                            diff_domain = selected_domain.replace(current_domain, "");
                        
                        $(this).val(_value + diff_domain);

                        $(wrapper).css({opacity: 0, visibility: "hidden"});
                    }
                    
                    return false;
                }

                if(e.key === "@") {
                    if(occurences_of_at === 1) {
                        $(wrapper).css({opacity: 1, visibility: "visible"});
                    } else {
                        $(wrapper).css({opacity: 0, visibility: "hidden"});
                    }
                }

                if(occurences_of_at === 1) {
                    var list_data = rebuildDatalist(suggestions, inputted_domain);
                    highlight(_value);

                    if(list_data.length == 0) {
                        $(wrapper).css({opacity: 0, visibility: "hidden"});
                    } else {
                        $(wrapper).css({opacity: 1, visibility: "visible"});
                    }
                } else {
                    var list_data = rebuildDatalist(suggestions, inputted_domain);

                    if(list_data.length == 0) {
                        $(wrapper).css({opacity: 0, visibility: "hidden"});
                    }
                }

                if($.inArray(e.key, directional_keys) != -1) {
                    e.stopPropagation();
                    e.preventDefault();

                    var list = $("." + settings.list_class).find(".list"),
                        current_selected = $(list).find("li").eq(selected_node),
                        current_index = 0,
                        first_interaction = false;

                    if($(current_selected).length == 1 && selected_node != null) {
                        current_index = $(current_selected).index();
                    } else {
                        first_interaction = true;
                        if(current_index == -1) current_index = 0;
                    }

                    current_selected = $(list).find(".domain-item").eq(current_index);

                    switch(e.key) {
                        case "ArrowUp":
                            var last_index = $(list).find("li").length - 1;

                            if(first_interaction) current_index = last_index;
                            else current_index = $(current_selected).prev(".domain-item").index();

                            if(current_index == -1) current_index = last_index;
                            
                            current_selected = $(list).find(".domain-item").eq(current_index);
                            selected_node = current_index;
                            
                            $(current_selected).addClass("selected");
                            break;
                        
                        case "ArrowDown":
                            if(first_interaction) current_index = 0;
                            else current_index = $(current_selected).next(".domain-item").index();

                            if(current_index == -1) current_index = 0;
                            
                            current_selected = $(list).find(".domain-item").eq(current_index);
                            selected_node = current_index;
                            
                            $(current_selected).addClass("selected");
                            break;
                    }

                    return false;
                }
            });
        });
    };
    
}(jQuery));