//story_component_wordbox_load
function story_component_wordbox_load() {
  for (key in dataStory) {
    var dataObject = dataStory[key];

    if (dataObject["objectType"] == "wordbox") {
      var object = new Konva.Group({
        id: key,
        x: parseInt(dataObject["x"]),
        y: parseInt(dataObject["y"]),
        data: dataObject,
      });
      grpStory.add(object);

      //target
      var answerText = new Konva.Text({
        id: "target",
        x: parseInt(dataObject["targetX"]),
        y: parseInt(dataObject["targetY"]),
        fill: dataObject["targetFill"],
        fontSize: parseInt(dataObject["targetFontSize"]),
        //width: width,
        //align: align,
        fontStyle: "bold",
        fontFamily: "Trebuchet MS, sans-serif",
        lineHeight: 1.5,
        letterSpacing: 10,
        textDecoration: "underline",
        data: dataObject,
      });
      object.add(answerText);

      //grpLetters
      var grpLetters = new Konva.Group({
        id: "grpLetters",
        x: 0,
        y: 0,
      });
      object.add(grpLetters);
      answer = dataObject["target"];

      var letters = answer.split("");
      function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
      }
      shuffleArray(letters);

      nextX = 0;

      for (let i = 0; i < letters.length; i++) {
        var letter = letters[i];

        //grpLetter
        var grpLetter = new Konva.Group({
          x: nextX,
          letter: letter,
        });
        grpLetters.add(grpLetter);
        initButton(grpLetter, 0);
        grpLetter.on("pointerdown ", function () {
          story_check_unlock = true;

          _object = this.getParent().getParent();
          _target = _object.findOne("#target");

          var letter = this.getAttr("letter");
          this.hide();
          this.opacity(0);
          answerWord = _target.text() + letter;
          _target.text(answerWord);

          if (answerWord.length >= letters.length) {
            //wordReset();
          }
        });

        //letterBoxImage
        var letterBoxImageSrc = new Image();
        var letterBoxImage = new Konva.Image({
          image: letterBoxImageSrc,
        });
        grpLetter.add(letterBoxImage);
        letterBoxImageSrc.src = stagePath + dataObject["image"];

        fontSize = parseInt(dataObject["imageWidth"]) / 2;

        //letterBoxText
        var letterBoxText = new Konva.Text({
          y: (parseInt(dataObject["imageHeight"]) - (fontSize + 7)) / 2,
          width: parseInt(dataObject["imageWidth"]),
          fontSize: fontSize,
          fill: dataObject["boxFill"],
          text: letter,
          align: "center",
          fontStyle: "bold",
          fontFamily: "Trebuchet MS, sans-serif",
          lineHeight: 1.5,
        });
        grpLetter.add(letterBoxText);

        nextX +=
          parseInt(dataObject["imageWidth"]) + parseInt(dataObject["boxSpace"]);
      }

      //grpLetters.x(((defaultStageWidth-dataObject['x'])-nextX)/2);
    }
  }
}
function story_component_wordbox_checker(obj, trueFalse) {
  var imageSrc = new Image();
  imageSrc.onload = function () {
    var checker = new Konva.Image({
      id: "checker",
      x: parseInt(obj.getAttr("data")["checkerX"]),
      y: parseInt(obj.getAttr("data")["checkerY"]),
      width: parseInt(obj.getAttr("data")["checkerWidth"]),
      height: parseInt(obj.getAttr("data")["checkerHeight"]),
      image: imageSrc,
    });
    obj.add(checker);
  };

  if (trueFalse) {
    imageSrc.src = stagePath + obj.getAttr("data")["checkerCorrect"];
  } else {
    imageSrc.src = stagePath + obj.getAttr("data")["checkerWrong"];
  }
}
function story_component_wordbox_check() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "wordbox") {
      storyTotalObject++;
      target = obj.findOne("#target");
      if (target.text() == obj.getAttr("data")["target"]) {
        storyTotalCorrect++;
        obj.setAttr("success", true);
        story_component_wordbox_checker(obj, true);
      } else {
        story_component_wordbox_checker(obj, false);
      }

      //hide letterboxes
      grpLetters = obj.findOne("#grpLetters");
      var letters = grpLetters.getChildren();
      for (key in letters) {
        letters[key].hide();
      }
    }
  }
}

function story_component_wordbox_solve() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "wordbox") {
      grpLetters = obj.findOne("#grpLetters");
      target = obj.findOne("#target");
      target.text(obj.getAttr("data")["target"]);

      checker = obj.findOne("#checker");
      if (checker) {
        checker.destroy();
      }

      var letters = grpLetters.getChildren();
      for (key in letters) {
        letters[key].hide();
      }
    }
  }
}

function story_component_wordbox_reset() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "wordbox") {
      grpLetters = obj.findOne("#grpLetters");
      target = obj.findOne("#target");
      target.text("");

      checker = obj.findOne("#checker");
      if (checker) {
        checker.destroy();
      }

      var letters = grpLetters.getChildren();

      for (key in letters) {
        letters[key].show();

        var tween = new Konva.Tween({
          node: letters[key],
          duration: Math.random(letters.length),
          opacity: 1,
          easing: Konva.Easings.StrongEaseInOut,
        });
        tween.play();
      }
    }
  }
}
