(function(jQuery) {
  "use strict";

  function AdvanceFillBlanksGame(instance, options) {
    var defaultOptions = {
      practiceMode: true,
      submitBtn: null,
      solutionBtn: null,
      retryBtn: null,
      sentenceHolder: null,
      blank: "###",
      template: null,
      sentences: [],
      showResult: false,
      allRequired: false,
      highlightEmptyText: false,
      showSolutionButton: false,
      isBack: false,
      response: []
    };
    this.instance = instance;
    this.options = jQuery.extend(true, {}, defaultOptions, options);
    this.options.solutionBtn.hide();
    this.options.retryBtn.hide();
    if (this.options.practiceMode) {
      this.options.submitBtn.hide();
    }
    this.$el = jQuery(this.instance);
    this.data = [];
    this.currentData = {};
    this.response = [];
    this.index = 0;
    this.wordIndex = 0;
    this.totalBlanks = 0;
    this.init();
  }
  AdvanceFillBlanksGame.prototype = {
    init: function() {
      var self = this;
      self.setupData();
      self.display();
      self.setupEventListeners();
      if (self.options.isBack) {
        self.showResponse();
      }
    },
    showResponse: function() {
      let self = this;
      for (let i = 0, j = self.options.response.length; i < j; i++) {
        let q = self.options.response[i];
        let $question = jQuery(
          ".advance-fill-question[data-id='" + q.id + "']"
        );
        let keys = Object.keys(q.answer);
        for (const key of keys) {
          let $input = jQuery($question).find(
            '.answer-input[data-c="' + key + '"]'
          );
          $input.val(q.answer[key].value);
          if (self.options.practiceMode) {
            if (q.answer[key].correct) {
              $input.closest(".input-holder").addClass("correct");
            } else {
              $input.closest(".input-holder").addClass("incorrect");
            }
          }
        }
      }
    },
    setupEventListeners: function() {
      var self = this;
      var element = $("#gameBody");

      element
        .attr("unselectable", "on")
        .css("user-select", "none")
        .on("selectstart dragstart", false);
      jQuery(document).on("blur keydown", ".answer-input", function(e) {
        var keyCode = 0;
        if (e.type == "keydown") {
          jQuery(this)
            .removeClass("empty")
            .closest(".input-holder")
            .removeClass("incorrect correct");
          keyCode = e.keyCode ? e.keyCode : e.which;
          self.options.solutionBtn.hide();
        }
        if (keyCode == 13 || e.type == "focusout") {
          e.stopPropagation();
          if (self.options.practiceMode) {
            self.checkAnswer(this);
          }
        }
      });
      self.options.solutionBtn.on("click", function() {
        self.showSolution();
        self.options.solutionBtn.hide();
        self.options.retryBtn.show();
      });
      self.options.retryBtn.on("click", function() {
        self.resetInputs();
        self.options.solutionBtn.hide();
        self.options.retryBtn.hide();
      });
      self.options.submitBtn.on("click", function() {
        var $inputs = jQuery(".answer-input");
        if (self.options.highlightEmptyText) {
          var $empties = $inputs
            .filter(function() {
              return this.value.trim().length == 0;
            })
            .addClass("empty");
        }

        if (self.options.allRequired && $empties.length > 0) {
          return;
        }
        self.response = [];
        var $questions = jQuery(".advance-fill-question");
        var $question, $input;
        for (var i = 0, j = $questions.length; i < j; i++) {
          $question = jQuery($questions[i]);
          $input = $question.find(".answer-input");

          var q_i = $question.attr("data-i");
          var question = self.data[q_i].data;

          var ans = {};
          for (var x = 0, y = $input.length; x < y; x++) {
            var $a = jQuery($input[x]);

            if (self.options.showResult) {
              self.checkAnswer($a);
            }

            var val = $a.val();
            var a_i = $a.attr("data-i");
            var correct_answers = question[a_i].word;
            var correct = false;
            jQuery.each(correct_answers, function(i, word) {
              if (val === word) {
                correct = true;
              }
            });

            ans[$a.attr("data-c")] = { value: val, correct: correct };
          }
          self.response.push({
            id: $question.attr("data-id"),
            answer: ans
          });
        }
        if (self.showResult) $inputs.attr("disabled", true);
        // jQuery(this)
        //   .off()
        //   .attr("disabled", true);
        self.gameComplete();
      });
    },
    gameComplete: function() {
      let self = this;
      let r = { skipped: false, correct: true };
      for (let i = 0, j = self.response.length; i < j; i++) {
        let a = self.response[i].answer;
        let ak = Object.keys(a);
        for (let x = 0, y = ak.length; x < y; x++) {
          if (a[x].value.length == 0) {
            r.skipped = true;
            r.correct = false;
            break;
          }
          if (a[x].correct == false) {
            r.correct = false;
          }
        }
      }

      self.$el.trigger("gameComplete", [self.response, self.data, r]);
    },
    resetInputs: function() {
      var self = this;
      jQuery(".feedback").remove();
      self.$el
        .find(".answer-input")
        .removeClass("attempted solution")
        .attr("disabled", false)
        .val("");
      self.$el.find(".input-holder").removeClass("correct incorrect");
    },
    showSolution: function() {
      var self = this;
      var $inputs = self.$el.find(".answer-input");
      self.resetInputs();
      for (var i = 0, j = $inputs.length; i < j; i++) {
        var $input = jQuery($inputs[i]);
        var $question = $input.closest(".advance-fill-question");
        var q_i = $question.attr("data-i");
        var a_i = $input.attr("data-i");
        var question = self.data[q_i].data;
        var answers = question[a_i].word;
        $input.val(answers[0]).attr("disabled", true);
        $input.addClass("solution");
      }
    },
    checkAnswer: function(ref) {
      var self = this;
      var $input = jQuery(ref);
      var $inputHolder = $input.closest(".input-holder");
      var val = $input.val();
      val = val.replace(/\s\s+/g, " ").toLowerCase();
      if (val.length > 0 || self.options.showResult) {
        jQuery(".feedback").remove();
        var $question = $input.closest(".advance-fill-question");
        var q_i = $question.attr("data-i");
        var a_i = $input.attr("data-i");
        var question = self.data[q_i].data;
        var answers = question[a_i].word;
        var correct = false;
        jQuery.each(answers, function(i, word) {
          word = word.toLowerCase();
          if (val === word) {
            correct = true;
          }
        });
        if (correct) {
          $inputHolder.removeClass("incorrect").addClass("correct");
          $input.off().attr("disabled", true);
        } else {
          $inputHolder.removeClass("correct").addClass("incorrect");
          var feedbacks = question[a_i].feedback;
          self.showFeedback($input, val, feedbacks);
        }
        $input.addClass("attempted");
      } else {
        $input.removeClass("attempted");
        $inputHolder.removeClass("incorrect");
      }

      self.checkCompletion();
    },
    showFeedback: function($input, val, feedbacks) {
      var feedback, regex;
      for (var i = 0, j = feedbacks.length; i < j; i++) {
        feedback = feedbacks[i];
        regex = RegExp(feedback.test);
        if (regex.test(val)) {
          $input
            .closest(".advance-fill-question")
            .prepend("<p class='feedback'>" + feedback.msg + "</p>");
        }
      }
    },
    display: function() {
      var self = this;
      var t = self.options.template({
        questions: self.data
      });
      self.$el.html(t);
    },
    checkCompletion: function() {
      var self = this;
      if (!self.options.showSolutionButton) return;
      var attempted = self.$el.find(".attempted");
      if (attempted.length == self.totalBlanks) {
        var incorrects = self.$el.find(".incorrect");
        if (incorrects.length > 0) {
          self.options.solutionBtn.show();
        }
      }
    },
    setupData: function() {
      var self = this;
      var i, j, k, l, tmp, sentence, blank_i;
      for (i = 0, j = self.options.sentences.length; i < j; i++) {
        sentence = [];
        tmp = self.options.sentences[i].sentence.split(self.options.blank);
        blank_i = 0;
        for (k = 0, l = tmp.length; k < l; k++) {
          sentence.push({
            word: tmp[k],
            blank: false
          });
          if (k + 1 < l) {
            sentence.push({
              index: blank_i,
              word: self.options.sentences[i].answer[k],
              feedback:
                jQuery.isArray(self.options.sentences[i].feedback) &&
                typeof self.options.sentences[i].feedback[k] !== "undefined"
                  ? self.options.sentences[i].feedback[k]
                  : [],
              blank: true
            });
            blank_i++;
            self.totalBlanks++;
          }
        }
        self.data.push({ id: self.options.sentences[i].id, data: sentence });
      }
      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.AdvanceFillBlanksGame = function(options) {
    var args = Array.prototype.slice.call(arguments, 1);
    var plgName = "AdvanceFillBlanksGame";
    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";
        }
        if (typeof options.template !== "function") {
          throw "template should be compiled handlebars template";
        }
        var p = new AdvanceFillBlanksGame(this, options);
        jQuery.data(this, plgName, p);
      } else if (typeof options !== "undefined") {
        if (typeof inst[options] === "function") {
          inst[options].apply(inst, args);
        }
      }
    });
  };
})(jQuery);