/* jshint esversion: 6 */
import {
    Template
} from 'meteor/templating';


Session.set("sections", [0,0]) // [Completed, Viewing] 
Session.set("profile", {classes: []});
Session.set("autocompleteDivs", null);
Session.set("notsearching", true); // If user isn't searching
Session.set("noclass", null); // If user doesn't have classes.
Session.set("notfound", null); // If no results for autocomplete.

Template.profile.helpers({
    schoolgradenext() {
        if(_.contains([null, undefined, ""], Meteor.user().profile.school ||
                      _.contains([null, undefined, ""], Meteor.user().profile.grade))) {
            return "";
        } else {
            return "disabled";
        }
    },
    showArrow(type) {
        var order = [
            {"back":false, "forward":true},
            {"back":true, "forward":true},
            {"back":true, "forward":false}
        ];
        var section = Session.get("sections");
        if(type === "forward") {
            return (section[1]+1 <= section[0] && order[section[1]][type]) ? "block":"none";
        } else {
            return (order[section[1]][type]) ? "block":"none";
        }
    },
    classes() {
         var array = classes.find({
            status: {
                $eq: true
            },
            privacy: {
                $eq: false
            },
            _id: {
                $nin: Session.get("profile").classes
            },
            school: {
                $eq: Session.get("profile").school
            }
        }, {
            sort: {
                subscribers: -1
            }
        }, {
            limit: 20
        }).fetch();

        for (var i = 0; i < array.length; i++) {
            array[i].join = true;
            array[i].subscribers = array[i].subscribers.length;
            array[i].teachershort = array[i].teacher.split(" ").slice(1).reduce(function(a, b) {
                return a + " " + b;
            });
        }
        if (array.length === 0) {
            Session.set("noclass", true);
        } else {
            Session.set("noclass", false);
        }
        return array;
    },
    classSettings() {
        return {
            position: "bottom",
            limit: 10,
            rules: [{
                token: '',
                collection: classes,
                template: Template.classAutoList,
                filter: {
                    privacy: false,
                    status: true
                },
                selector: (match) => {
                    regex = new RegExp(match, 'i');
                    return {
                        $or: [{
                            'name': regex
                        }, {
                            'teacher': regex
                        }, {
                            'hour': regex
                        }]
                    };
                }
            }]
        };
    },
    schoolComplete() { // Returns autocomplete array for schools.
        return {
            position: "bottom",
            limit: 6,
            rules: [{
                token: '',
                collection: schools,
                field: 'name',
                matchAll: true,
                template: Template.schoolList
            }]
        };
    },
    teacherComplete() { // Returns autocomplete array for teachers.
        return {
            position: "bottom",
            limit: 1,
            rules: [{
                token: '',
                collection: teachers,
                field: 'name',
                template: Template.teacherList
            }]
        };
    },
    notsearching() { // Tells whether user is using the searchbox
        return Session.get("notsearching");
    },
    autocompleteClasses() { // Returns current auto-completes for classes
        return Session.get("autocompleteDivs");
    },
    notfound() { // Returns if autocomplete has no results.
        return Session.get("notfound");
    },
    enrollClass() {
        var myClasses = Session.get("profile").classes;
        if(myClasses === undefined || myClasses.length === 0) return [{name:"Enroll!",x:false}];
        return myClasses.map(function(a){return {name:classes.findOne({_id:a}).name,x:true,_id:a}});
    }
});

Template.profile.events({
    'click' (event) { // Closes respective divs when clicking outside of them. Order matters.
        var e = event.target.className;

        if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
            if (!(e.includes("optionHolder") || e.includes("optionText"))) {
                toggleOptionMenu(false, modifyingInput);
                modifyingInput = null;
            }
        }
    },
    'click #basicNext' () {
        var inputs = document.getElementsByClassName("basicInfoField");
        var required = ["school", "grade"];
        var alert = checkComplete(required, inputs);
        var values = alert[2];
        if(!alert[0]) {
            sAlert.error("Missing " + alert[1], {
                effect: 'stackslide',
                position: 'top',
                timeout: 3000
            });
            return;
        } 
        var profile = Session.get("profile");
        profile.school = values["school"];
        profile.grade = values["grade"];
        Session.set("profile", profile);
        Session.set("sections", [(Session.get("sections")[0] < 1) ? 1 : Session.get("sections")[0], Session.get("sections")[1]]);
        slideToField(1);
    },
    'click #createActivate' () {
        Session.set("sections", [(Session.get("sections")[0] < 2) ? 2 : Session.get("sections")[0], Session.get("sections")[1]]);
        slideToField(2);
    },
    'click #backArrow' () {
        slideToField(Session.get("sections")[1]-1);
    },
    'click #forwardArrow' () {
        slideToField(Session.get("sections")[1]+1);
    },
    // HANDLING INPUT CHANGING
    'focus .clickModify' (event) {
        $(".optionHolder")
        .fadeOut(100);

        if(modifyingInput !== null) {
            if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
        }
        modifyingInput = event.target.id;
        if(!$("#"+modifyingInput)[0].className.includes("dropdown")) {
            event.target.select();
            event.target.style.cursor = "text";
        }
    },
    'keydown .dropdown' (event) {
        var first = $("#"+modifyingInput).next().children("p:first-child");
        var last = $("#"+modifyingInput).next().children("p:last-child");
        var next = $(".selectedOption").next();
        var prev = $(".selectedOption").prev();
        var lastSel = $(".selectedOption");

        if (event.keyCode === 38) {
            event.preventDefault();
            if (lastSel === undefined) {
                last.addClass("selectedOption");
            } else {
                if (prev.length === 0) {
                    last.addClass("selectedOption");
                    lastSel.removeClass("selectedOption");
                } else {
                    prev.addClass("selectedOption");
                    lastSel.removeClass("selectedOption");
                }
            }
        } else if (event.keyCode === 40) {
            event.preventDefault();
            if (lastSel === undefined) {
                first.addClass("selectedOption");
                last.removeClass("selectedOption");
            } else {
                if (next.length === 0) {
                    first.addClass("selectedOption");
                    lastSel.removeClass("selectedOption");
                } else {
                    next.addClass("selectedOption");
                    lastSel.removeClass("selectedOption");
                }
            }
        } else if (event.keyCode === 13) {
            lastSel[0].click();
            $("#"+modifyingInput)[0].focus();
        }
    },
    'click .dropdown, focus .dropdown' (event) {
        if(clickDisabled) return;
        clickDisabled = true;
        if(event.target.id === optionOpen[0] && optionOpen[1]) {
            toggleOptionMenu(false, event.target.id);
        } else {
            toggleOptionMenu(true, event.target.id);
        }
        setTimeout(function(){clickDisabled = false;},130); // Prevents spamming and handles extra click events.
    },
    'click .optionText' (event) { // Click each preferences setting.
        var option = event.target.childNodes[0].nodeValue;
        document.getElementById(modifyingInput).value = option;
        toggleOptionMenu(false, modifyingInput);
        $(".selectedOption").removeClass("selectedOption");
    },
    'input #classSearch' (event) { // Auto-complete updater
        if (event.target.value.length === 0) {
            Session.set("notsearching", true);
        } else {
            Session.set("notsearching", false);
        }
        Session.set("autocompleteDivs", null);
        var divs = [];
        try {
            var items = document.getElementsByClassName("-autocomplete-container")[0].children;  
            if(items[0].tagName === "I") {
                Session.set("notfound", true);
                return;
            } else {
                items = items[0].children;
                for(var i = 0; i < items.length; i++) {
                    var item = items[i].children;
                    var id = item[4].textContent;
                    if(Session.get("profile").classes.indexOf(id) !== -1) continue;
                    divs.push({
                        name: item[0].textContent,
                        teachershort: item[1].textContent.split(" ")[1],
                        hour: item[2].textContent,
                        subscribers: (item[3].textContent.match(new RegExp(",","g")) || []).length+1,
                        _id: id,
                        join: true
                    })
                }
                Session.set("autocompleteDivs", divs.sort(function(a, b) {
                    return b.subscribers - a.subscribers;
                }));
                Session.set("notfound", false);
                return;
            }
        } catch(err) {}
    },
    'click .classBox .fa-plus' (event) {
        var profile = Session.get("profile");
        var id = event.target.parentNode.getAttribute("classid");
        if(profile.classes.indexOf(id) === -1) {
            profile.classes.push(id);
            Session.set("profile", profile);
            if(Session.get("autocompleteDivs") === null) return;
            var divs = Session.get("autocompleteDivs");
            divs.splice(divs.map(function(a) {
                return a._id; 
            }).indexOf(id),1);
            Session.set("autocompleteDivs", divs);
        }
    },
    'click #ESCWrapper .fa-times' (event) {
        var profile = Session.get("profile");
        var id = event.target.parentNode.getAttribute("classid");
        if(profile.classes.indexOf(id) !== -1) {
            profile.classes.splice(profile.classes.indexOf(id),1);
            Session.set("profile", profile);
            if(Session.get("autocompleteDivs") === null) return;
            var divs = Session.get("autocompleteDivs");
            var myClass = classes.findOne({_id: id});
            myClass.subscribers = myClass.subscribers.length;
            myClass.teachershort = myClass.teacher.split(" ")[1]
            myClass.join = true;
            divs.push(myClass);
            Session.set("autocompleteDivs", divs.sort(function(a, b) {
                return b.subscribers - a.subscribers;
            }));
        }
    }
});

function slideToField(field) {
    var order = ["basicInfo", "enrollInfo", "createInfo"];
    $(".moveArrow").animate({"opacity":0})
    $("#enrollClassList").fadeOut(200);
    var viewing = Session.get("sections")[1]
    var move = (viewing-field < 0) ? "-50%" : "150%";
    $("#"+order[viewing]).animate({top: move});
    $("#"+order[field]).animate({
        top:"20%"
    },{
        complete: function() {
            Session.set("sections", [Session.get("sections")[0],field]);
            $(".moveArrow").animate({"opacity":1});
            if(field === 1) {
                $("#enrollClassList").fadeIn(200);
            }
        }
    });
}