(function(jQuery) {
    "use strict";

    function FillBlanksDDGame(instance, options) {
        var defaultOptions = {
            sentenceHolder: null,
            wordsHolder: null,
            submitBtn: null,
            blank: "###",
            sentences: [],
            showResult: false,
            isBack: false,
            response: []
        };
        this.instance = instance;
        this.options = jQuery.extend(true, {}, defaultOptions, options);
        this.$el = jQuery(this.instance);
        this.data = [];
        this.currentData = {};
        this.response = [];
        this.index = 0;
        this.halt = false;
        this.init();
    }
    FillBlanksDDGame.prototype = {
        init: function() {
            var self = this;
            //self.options.submitBtn.prop("disabled", true);
            self.setupData();
            self.setupEventListeners();
            self.showChallenge();
        },
        setupEventListeners: function() {
            var self = this;
            self.options.submitBtn.on("click", function() {
                var holders = self.options.sentenceHolder.find(".word-drop-holder-data");
                var w = [];
                self.response = [];
                jQuery.each(holders, function(x, y) {
                    var j = jQuery(y).find(".word-dropped");
                    if (j.length > 0) {
                        w.push({
                            index: jQuery(j).attr("data-index"),
                            word: jQuery(j).attr("data-word")
                        });
                    } else {
                        w.push(null);
                    }
                });
                self.response.push({
                    correct_answer: self.data[self.index].options,
                    response: w
                });
                if (self.index < self.data.length - 1) {
                    self.index++;
                    self.showChallenge();
                } else {
                    self.onCompletion();
                }
            });
        },
        onCompletion: function() {
            var self = this;
            if (self.options.showResult) {
                self.highlightResults();
            }
            let res = self.response[0];
            let skipped = res.response.length != res.correct_answer.length;
            let r = { skipped: skipped, correct: !skipped };
            for (let i = 0, j = res.response.length; i < j; i++) {
                if (res.response[i] === null) {
                    r.skipped = true;
                    r.correct = false;
                    //break;
                } else if (res.response[i].index != res.correct_answer[i].index) {
                    r.correct = false;
                    //break;
                }
            }

            self.$el.trigger("gameComplete", [self.response, self.data, r]);
        },
        highlightResults: function() {
            let self = this;
            let result = self.response;

            for (let i = 0; i < result.length; i++) {
                let wordHolder = self.$el.find(`.word-drop-holder-data[question-index='${i}']`);
                for (let j = 0; j < result[i].response.length; j++) {
                    let curHolder = Array.from(wordHolder).filter(h => h.getAttribute("data-index") == j)[0];
                    if (curHolder) {
                        var response = result[i].response[j];
                        if (response) {
                            if (response.index == result[i].correct_answer[j].index) {
                                curHolder.classList.add("correct");
                            } else {
                                curHolder.classList.add("incorrect");
                            }
                        }
                    }
                }
            }
        },
        toggleSubmit: function() {
            //var self = this;
            //if (self.options.wordsHolder.find(".word-drag").length > 0) {
            //    self.options.submitBtn.prop("disabled", true);
            //} else {
            //    self.options.submitBtn.prop("disabled", false);
            //}
        },
        showChallenge: function() {
            var self = this;
            //self.options.submitBtn.prop("disabled", true);
            self.currentData = self.data[self.index];
            self.options.sentenceHolder.off().empty();
            self.options.wordsHolder.off().empty();
            let words = [];
            let optionIndex = 0;
            jQuery.each(self.currentData.sentence_words, function(i, w) {
                if (w.blank) {
                    words.push(
                        '<div class="word-drop-holder word-drop-holder-data"' +
                            `question-index = ${self.index} data-index=${optionIndex}` +
                            '><div class="word-drop-zone word-drop-zone-x"></div></div>'
                    );
                    optionIndex++;
                } else {
                    words.push('<span class="not-blank">' + w.word + "</span>");
                }
            });
            let buttons = [];
            jQuery.each(self.currentData.shuffled, function(i, d) {
                buttons.push(self.getDragWord(d.index, d.word));
            });
            self.options.wordsHolder.html(buttons.join(""));
            self.options.sentenceHolder.html(words.join(""));
            self.setupDragDrop();
            if (self.options.isBack && self.options.response.length > 0) {
                let response = self.options.response[0].response;
                jQuery.each(response, function(i, r) {
                    if (r !== null) {
                        let $droppable = jQuery('.word-drop-holder[data-index="' + i + '"]').find(".word-drop-zone");
                        let droppableOffset = $droppable.offset();
                        let $draggable = jQuery('.word-drag[data-index="' + r.index + '"]');
                        let draggableOffset = $draggable.offset();
                        let dx = droppableOffset.left - draggableOffset.left;
                        let dy = droppableOffset.top - draggableOffset.top;

                        $draggable.simulate("drag", {
                            dx: dx,
                            dy: dy
                        });
                    }
                });
            }
        },
        setupDragDrop: function() {
            var self = this;
            self.$el.find(".word-drag").draggable({
                revert: "invalid",
                scroll: true,
                helper: "clone",
                start: function() {
                    self.$el.trigger("dragStart");
                },
                stop: function() {
                    self.$el.trigger("dragEnd");
                }
            });
            self.$el.find(".word-drop-zone").droppable({
                accept: ".word-drag, .word-dropped",
                classes: {
                    "ui-droppable-active": "ui-state-active",
                    "ui-droppable-hover": "ui-state-hover"
                },
                drop: function(event, ui) {
                    var $holder = jQuery(ui.draggable).parent();
                    jQuery(this).droppable("option", "disabled", true);
                    var e = self.getDragWord(ui.draggable.attr("data-index"), ui.draggable.attr("data-word"), "word-dropped");

                    if ($holder[0].querySelector("span.word-dropped")) {
                        $holder.parent().addClass("word-drop-holder");
                        $holder.addClass("word-drop-zone");
                        $holder.addClass("ui-droppable");
                    }

                    this.parentElement.classList.remove("word-drop-holder");
                    this.classList.remove("word-drop-zone");
                    this.classList.remove("ui-droppable");

                    jQuery(ui.draggable).detach();
                    jQuery(this)
                        .removeClass("word-drop-zone-x")
                        .append(e);
                    if ($holder.hasClass("word-drop-zone")) {
                        $holder.addClass("word-drop-zone-x").removeClass("ui-droppable-disabled");
                        $holder.droppable("option", "disabled", false);
                    }
                    self.$el.trigger("itemSelected");
                    self.setupReverseDragDrop();
                    self.toggleSubmit();
                }
            });
            self.options.wordsHolder.droppable({
                accept: ".word-dropped",
                classes: {
                    "ui-droppable-active": "ui-state-active",
                    "ui-droppable-hover": "ui-state-hover"
                },
                drop: function(event, ui) {
                    var $holder = jQuery(ui.draggable).parent();
                    var e = self.getDragWord(ui.draggable.attr("data-index"), ui.draggable.attr("data-word"));

                    jQuery(ui.draggable).detach();
                    jQuery(this).append(e);
                    $holder.addClass("word-drop-zone-x").removeClass("ui-droppable-disabled");
                    $holder.droppable("option", "disabled", false);

                    self.setupDragDrop();
                    self.toggleSubmit();
                }
            });
        },
        setupReverseDragDrop: function() {
            var self = this;
            self.$el.find(".word-dropped").draggable({
                revert: "invalid",
                scroll: true,
                helper: "clone"
            });
        },
        getDragWord: function(index, word, cls) {
            let self = this;
            if (typeof cls === "undefined") {
                cls = "word-drag";
            }
            return '<span class="' + cls + '" data-word="' + self.escapeHTML(word) + '" data-index="' + index + '">' + word + "</span>";
        },
        setupData: function() {
            var self = this;
            var sentences = [];
            var i, j, k, l, tmp, sentence;
            for (i = 0, j = self.options.sentences.length; i < j; i++) {
                sentence = [];
                tmp = self.options.sentences[i].sentence.split(self.options.blank);
                for (k = 0, l = tmp.length; k < l; k++) {
                    sentence.push({
                        word: tmp[k],
                        blank: false
                    });
                    if (k + 1 < l) {
                        sentence.push({
                            word: self.options.sentences[i].words[k],
                            blank: true
                        });
                    }
                }
                sentences.push(sentence);
            }
            for (i = 0, j = sentences.length; i < j; i++) {
                var sentence_words = sentences[i];
                var options = [];
                var blank_index = 0;
                jQuery.each(sentence_words, function(i, w) {
                    if (w.blank) {
                        options.push({ index: blank_index, word: w.word });
                        blank_index++;
                    }
                });

                tmp = {
                    sentence_words: sentences[i].slice(),
                    options: options,
                    shuffled: options.slice()
                };
                self.shuffle(tmp.shuffled);
                self.data.push(tmp);
            }
            self.shuffle(self.data);
        },
        shuffle: function(array) {
            var currentIndex = array.length;
            var temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        },
        escapeHTML: function(html) {
            return html
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
    };

    jQuery.fn.FillBlanksDDGame = function(options) {
        var args = Array.prototype.slice.call(arguments, 1);
        var plgName = "FillBlanksDDGame";
        return this.each(function() {
            var inst = jQuery.data(this, plgName);
            if (typeof inst === "undefined") {
                if (typeof options === "undefined" || typeof options == "string" || options instanceof String) {
                    throw "invalid options passed while creating new instance.";
                }
                if (typeof options.sentences === "undefined" || !jQuery.isArray(options.sentences)) {
                    throw "invalid options";
                }
                var p = new FillBlanksDDGame(this, options);
                jQuery.data(this, plgName, p);
            } else if (typeof options !== "undefined") {
                if (typeof inst[options] === "function") {
                    inst[options].apply(inst, args);
                }
            }
        });
    };
})(jQuery);