var story_component_audiobook_player_internal = [];
var story_component_audiobook_buttons_x = -128;

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

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

      //image
      var image;
      var imageSrc = new Image();
      imageSrc.onload = function () {
        /*
        image.width(parseInt(dataObject["width"]));
        image.height(parseInt(dataObject["height"]));
        */
      };
      image = new Konva.Image({
        id: "image",
        x: 0,
        y: 0,
        width: parseInt(dataObject["width"]),
        height: parseInt(dataObject["height"]),
        image: imageSrc,
      });
      imageSrc.src = stagePath + dataObject["pageStart"] + ".png";
      object.add(image);

      //audio
      story_component_audiobook_player_internal[key] = new Audio();
      story_component_audiobook_player_internal[key].src =
        stagePath + dataObject["pageStart"] + ".mp3";
      if (dataObject["autoPlay"] == "1") {
        autoPlayAudio = story_component_audiobook_player_internal[key];
      }

      //buttonHome
      var buttonHome;
      var buttonHomeSrc = new Image();
      buttonHomeSrc.onload = function () {
        buttonHome = new Konva.Image({
          x: story_component_audiobook_buttons_x + 16,
          y: 16,
          image: buttonHomeSrc,
          width: 96,
          height: 96,
          action: "home",
        });
        object.add(buttonHome);
        initButton(buttonHome, 1);
        buttonHome.on("pointerdown ", function () {
          story_component_audiobook_click(this);
        });
      };
      buttonHomeSrc.src = "qc/assets/audiobookHome.svg";

      //buttonPrev
      var buttonPrev;
      var buttonPrevSrc = new Image();
      buttonPrevSrc.onload = function () {
        buttonPrev = new Konva.Image({
          x: story_component_audiobook_buttons_x + 16,
          y: 119,
          image: buttonPrevSrc,
          width: 96,
          height: 96,
          action: "prev",
        });
        object.add(buttonPrev);
        initButton(buttonPrev, 1);
        buttonPrev.on("pointerdown ", function () {
          story_component_audiobook_click(this);
        });
      };
      buttonPrevSrc.src = "qc/assets/audiobookPrev.svg";

      //buttonNext
      var buttonNext;
      var buttonNextSrc = new Image();
      buttonNextSrc.onload = function () {
        buttonNext = new Konva.Image({
          x: story_component_audiobook_buttons_x + 16,
          y: 222,
          image: buttonNextSrc,
          width: 96,
          height: 96,
          action: "next",
        });
        object.add(buttonNext);
        initButton(buttonNext, 1);
        buttonNext.on("pointerdown ", function () {
          story_component_audiobook_click(this);
        });
      };
      buttonNextSrc.src = "qc/assets/audiobookNext.svg";

      //buttonPause
      var buttonPause;
      var buttonPauseSrc = new Image();
      buttonPauseSrc.onload = function () {
        buttonPause = new Konva.Image({
          x: story_component_audiobook_buttons_x + 16,
          y: 324,
          image: buttonPauseSrc,
          width: 96,
          height: 96,
          action: "pause",
        });
        object.add(buttonPause);
        initButton(buttonPause, 1);
        buttonPause.on("pointerdown ", function () {
          story_component_audiobook_click(this);
        });
      };
      buttonPauseSrc.src = "qc/assets/audiobookPause.svg";

      //buttonPlay
      var buttonPlay;
      var buttonPlaySrc = new Image();
      buttonPlaySrc.onload = function () {
        buttonPlay = new Konva.Image({
          x: story_component_audiobook_buttons_x + 16,
          y: 427,
          image: buttonPlaySrc,
          width: 96,
          height: 96,
          action: "play",
        });
        object.add(buttonPlay);
        initButton(buttonPlay, 1);
        buttonPlay.on("pointerdown ", function () {
          story_component_audiobook_click(this);
        });
      };
      buttonPlaySrc.src = "qc/assets/audiobookPlay.svg";
    }
  }
}

function story_component_audiobook_click(e) {
  let object = e.getParent();
  let key = object.id();
  let dataObject = object.getAttr("data");
  let pageCurrent = object.getAttr("pageCurrent");
  let pageStart = dataObject["pageStart"];
  let pageEnd = dataObject["pageEnd"];
  let image = object.findOne("#image");

  switch (e.getAttr("action")) {
    case "home":
      pageCurrent = pageStart;
      object.setAttr("pageCurrent", pageCurrent);
      story_component_audiobook_loadPage(pageCurrent);
      break;

    case "prev":
      pageCurrent--;
      if (pageCurrent < pageStart) {
        pageCurrent = pageStart;
      }
      object.setAttr("pageCurrent", pageCurrent);
      story_component_audiobook_loadPage(pageCurrent);
      break;

    case "next":
      pageCurrent++;
      if (pageCurrent > pageEnd) {
        pageCurrent = pageEnd;
      }
      object.setAttr("pageCurrent", pageCurrent);
      story_component_audiobook_loadPage(pageCurrent);
      break;

    case "pause":
      story_component_audiobook_player_internal[key].pause();
      break;

    case "play":
      story_component_audiobook_player_internal[key].play();
      break;
  }

  function story_component_audiobook_loadPage(pageCurrent) {
    //loadImage
    let imageSrc = new Image();
    imageSrc.onload = function () {
      image.image(imageSrc);
    };
    imageSrc.src = stagePath + pageCurrent + ".png";

    //loadAudio
    story_component_audiobook_player_internal[key].src =
      stagePath + pageCurrent + ".mp3";
    story_component_audiobook_player_internal[key].play();
  }
}

function story_component_audiobook_check() {}

function story_component_audiobook_solve() {}

function story_component_audiobook_reset() {}
