(function (jQuery) {
    "use strict";

    function FillBlanksGame(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();
    }
    FillBlanksGame.prototype = {
        init: function () {
            var self = this;
            //self.options.submitBtn.prop("disabled", true);
            self.setupData();
            self.setupEventListeners();
            self.showChallenge();
            if (self.options.isBack && self.options.response.length > 0) {
                self.showResponse();
            }
        },
        showResponse: function () {
            let self = this;
            let res = self.options.response[0].response;
            for (let i = 0, j = res.length; i < j; i++) {
                if (res[i] !== null) {
                    let $w = self.options.wordsHolder.find('.word[data-index="' + res[i].index + '"]');
                    let $b = self.options.sentenceHolder.find('.blank[data-index="' + i + '"]');
                    $b.empty().append($w);
                    $b.find(".word")
                        .removeClass("in-options game-word-mar")
                        .addClass("in-sentence");
                    $b.removeClass("empty");
                }
            }
        },
        setupEventListeners: function () {
            var self = this;
            jQuery(document).on("click", ".in-sentence", function () {
                if (self.halt) {
                    return;
                }
                self.halt = true;
                self.$el.trigger("itemSelected");
                //self.options.submitBtn.prop("disabled", true);
                var $this = jQuery(this);
                var _this = $this[0];
                var rect = _this.getBoundingClientRect();
                var $target = self.options.wordsHolder;
                var $holder = $this.parent();
                $holder.append("<span class='word'>&nbsp;</span>");
                $target.append($this);
                TweenMax.set(_this, { x: 0, y: 0 });
                var newRect = _this.getBoundingClientRect();

                TweenMax.from(_this, 1, {
                    x: rect.left - newRect.left,
                    y: rect.top - newRect.top,
                    ease: Power3.easeOut,
                    onStart: function () {
                        $this.addClass("game-word-mar");
                    },
                    onComplete: function () {
                        self.halt = false;
                        $this.removeClass("in-sentence").addClass("in-options");
                        $holder.addClass("empty");
                        self.toggleSubmit();
                    }
                });
            });
            jQuery(document).on("click", ".in-options", function () {
                if (self.halt) {
                    return;
                }
                self.halt = true;
                self.$el.trigger("itemSelected");
                //self.options.submitBtn.prop("disabled", true);
                var $this = jQuery(this);
                var _this = $this[0];
                var rect = _this.getBoundingClientRect();
                var $target = self.options.sentenceHolder.find(".empty").first();
                $this.removeClass("game-word-mar");
                $target.empty().append($this);

                TweenMax.set(_this, { x: 0, y: 0 });

                var newRect = _this.getBoundingClientRect();

                TweenMax.from(_this, 1, {
                    x: rect.left - newRect.left,
                    y: rect.top - newRect.top,
                    ease: Power3.easeOut,
                    onStart: function () {
                        //
                    },
                    onComplete: function () {
                        $this.removeClass("in-options").addClass("in-sentence");
                        $target.removeClass("empty");
                        self.halt = false;
                        self.toggleSubmit();
                    }
                });
            });
            self.options.submitBtn.on("click", function () {
                if (self.halt) return;

                //var words = self.options.sentenceHolder.find(".in-sentence");
                var holders = self.options.sentenceHolder.find(".blank");
                var w = [];
                jQuery.each(holders, function (x, y) {
                    var j = jQuery(y).find(".in-sentence");
                    if (j.length > 0) {
                        w.push({
                            index: jQuery(j).attr("data-index"),
                            word: jQuery(j).attr("data-word")
                        });
                    } else {
                        w.push(null);
                    }
                });
                self.response = [];
                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) {
                // jQuery(document).off("click", ".in-sentence");
                // jQuery(document).off("click", ".in-options");
                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(`.blank[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) {
                        if (result[i] && result[i].response[j] && result[i].response[j].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(".game-word-btn").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 blank_index = 0;
            jQuery.each(self.currentData.sentence_words, function (i, w) {
                if (w.blank) {
                    words.push('<span id="blank-' + blank_index + `"question-index = ${self.index} data-index=${blank_index} class="blank blank-border empty"><span class="word">&nbsp;</span></span>`);
                    blank_index++;
                } else {
                    words.push('<span class="not-blank">' + w.word + "</span>");
                }
            });
            let buttons = [];
            jQuery.each(self.currentData.shuffled, function (i, d) {
                buttons.push('<span class="word in-options game-word-btn game-word-pad game-word-mar" data-word="' + d.word + '" data-index="' + d.index + '">' + d.word + "</span>");
            });
            self.options.wordsHolder.html(buttons.join(""));
            self.options.sentenceHolder.html(words.join(""));
        },
        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;
        }
    };

    jQuery.fn.FillBlanksGame = function (options) {
        var args = Array.prototype.slice.call(arguments, 1);
        var plgName = "FillBlanksGame";
        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 FillBlanksGame(this, options);
                jQuery.data(this, plgName, p);
            } else if (typeof options !== "undefined") {
                if (typeof inst[options] === "function") {
                    inst[options].apply(inst, args);
                }
            }
        });
    };
})(jQuery);