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

Session.set("sections", [0,0]); // [Completed, Viewing]
Session.set("profile", {classes: []});
Session.set("newClasses", []);
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({
    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 === undefined) ? "" : 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;
        var newClasses = Session.get("newClasses");
        if((myClasses === undefined || myClasses.length === 0) && newClasses.length === 0) return [{name:"Enroll!",x:false}];
        var array = myClasses.map(function(a) {
            return {name:classes.findOne({_id:a}).name,x:true,_id:a}
        });
        array.push.apply(array,newClasses.map(function(a){
            return {name:a.name,_id:(Math.floor(Math.random()*1000)).toString(),x:true};
        }));
        return array;
    },
    school() {
        return Session.get("profile").school;
    }
});

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);
        $("#profileSubmit").fadeIn(200);
    },
    'click #createActivate' () {
        Session.set("sections", [(Session.get("sections")[0] < 2) ? 2 : Session.get("sections")[0], Session.get("sections")[1]]);
        slideToField(2);
    },
    'click #creSubmit' () {
        var inputs = document.getElementsByClassName("creInput");
        var required = ["school", "name", "privacy", "category"];
        var alert = checkComplete(required, inputs);
        var values = alert[2];
        if(!alert[0]) {
            sAlert.error("Missing " + alert[1], {
                effect: 'stackslide',
                position: 'top',
                timeout: 3000
            });
            return;
        }
        values.privacy = (values.privacy === "Public") ? false : true;
        values.status = false;
        values.category = values.category.toLowerCase();
        values.code = "";

        if(values.teacher !== "" && values.teacher.split(" ").length < 2) {
            sAlert.error("Please enter the full name of the teacher! Ex: Darrin Woods", {
                effect: 'stackslide',
                position: 'bottom-right',
                timeout: 3000
            });
            return;
        }

        var newClasses = Session.get("newClasses");
        var duplicate = false;
        for(var i = 0; i < newClasses.length; i++) {
            if(JSON.stringify(newClasses[i]) === JSON.stringify(values)) duplicate = true;
            if(newClasses[i].school === values.school && newClasses[i].teacher === values.teacher && newClasses[i].hour === values.hour) {
                sAlert.error("This teacher is already teaching a class elsewhere!", {
                    effect: 'stackslide',
                    position: 'bottom-right',
                    timeout: 3000
                });
                return;
            }
        }
        if(!duplicate && newClasses.length < 8) newClasses.push(values);
        if(duplicate) {
            sAlert.error("You already created this class!", {
                effect: 'stackslide',
                position: 'bottom-right',
                timeout: 3000
            });
        }
        if(newClasses.length === 8) {
            sAlert.error("You already created 8 classes!", {
                effect: 'stackslide',
                position: 'bottom-right',
                timeout: 3000
            });
            return;
        }
        if(classes.findOne({school: values.school, teacher: values.teacher, status: true, privacy: false, hour: values.hour}) || (values.teacher === "" && values.hour === ""))  {
            sAlert.error("This teacher is already teaching a class elsewhere!", {
                effect: 'stackslide',
                position: 'bottom-right',
                timeout: 3000
            });
            return;
        }

        Session.set("newClasses", newClasses);
        $(".creInput").each(function(){$(this).val('');});
        $(".creInput")[0].value = Session.get("profile").school;
        slideToField(Session.get("sections")[1]-1);
        
    },
    '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");
        var newSetting = Session.get("profile");
        if(modifyingInput === "school") {
            if(option !== Session.get("profile").school) newSetting["classes"] = [];
            newSetting.school = option;
        } else if(modifyingInput === "grade") {
            newSetting = Session.get("profile");
            newSetting.grade = option; 
        }
        Session.set("profile", newSetting);
    },
    '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, click #classBody .classBox' (event) {
        var profile = Session.get("profile");
        while(event.target.getAttribute("classid") === null) event.target = event.target.parentNode;
        var id = event.target.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(id.length < 17) {
            var newClasses = Session.get("newClasses");
            newClasses.splice(newClasses.map(function(a) {
                return a._id;
            }).indexOf(id),1);
            Session.set("newClasses", newClasses);
            return;
        }
        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;
            }));
        }
    },
    'click #profileSubmit' () {
        // clear html and make page uninteractable
        var myClasses = Session.get("profile").classes;
        var newClasses = Session.get("newClasses");
        var message = "Sorry, your profile couldn't be created. Please try again!";

        if(myClasses.length === 0 && newClasses.length === 0) {
            sAlert.error("Please enroll in a class!", {
                effect: 'stackslide',
                position: 'top'
            });
            return;
        }

        joinClass(0);

        _.each(newClasses, function(newClass) {
            if(!teachers.findOne({
                name: newClass.teacher
            })) {
                Meteor.call("createTeacher", newClass.teacher, newClass.school, function(error, result) {
                    if (error !== undefined) {
                        sAlert.error(message, {
                            effect: 'stackslide',
                            position: 'top'
                        });
                    }
                });
            }
        });

        createClass(0);
    
        var profile = Session.get("profile");
        profile.complete = true;
        profile.preferences = Meteor.user().profile.preferences;
        profile.classes.push(Meteor.userId());
        Meteor.call("editProfile", profile, function(err, result) {
            if(err !== undefined) {
                sAlert.error(message, {
                    effect: 'stackslide',
                    position: 'top'
                });
            }
            Meteor.subscribe('classes');
            Meteor.subscribe('schools');
            Meteor.subscribe('teachers');
            Meteor.subscribe('work');
            Meteor.subscribe('requests');
            Meteor.subscribe("personalUser");
            Meteor.subscribe('users');
        });  
    }
});

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

var joined = 0;
var created = 0;

function joinClass(num) {
    var joining = Session.get("profile").classes;
    if(joining.length === 0) return;
    Meteor.call("joinClass", [joining[num], ""], function(err, result) {
        if(err !== undefined) {
            sAlert.error(err.message, {
                effect: 'stackslide',
                position: 'top'
            });
        }
        joined++;
        if(joined !== joining.length) {
            joinClass(joined);
        }
    });
}

function createClass(num) {
    var creating = Session.get("newClasses");
    if(creating.length === 0) return;
    Meteor.call("createClass", creating[num], function(error, result) {
        if(error !== undefined) {
            sAlert.error(error.message, {
                effect: 'stackslide',
                position: 'top'
            });    
        }
        created++;
        if(created !== creating.length) {
            createClass(created);
        }
    });
}