class Controller {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Get video code
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    let videoToLoad = urlParams.get("v");
    let video = document.getElementById("video");

    this.loadVideo(videoToLoad).then(
      function () {
        video.addEventListener(
          "loadedmetadata",
          function () {
            this.view.videoPlayer.updateVideoDuration();
            this.addEventListenersToVideoControls();
            this.init(videoToLoad);
          }.bind(this)
        );
      }.bind(this)
    );
  }

  init(videoToLoad) {
    this.loadXml(videoToLoad).then(
      function (v) {
        this.view.drawCommentsText(v);
        this.view.drawCommentsToVideo(v);
      }.bind(this)
    );
  }

  // Přidání listenerů
  addEventListenersToVideoControls() {
    const video = document.getElementById("video");
    const videoControls = document.getElementById("video-controls");
    const togleButton = document.getElementById("togglePlayIcon");
    videoControls.addEventListener(
      "click",
      function (e) {
        if (e.target !== videoControls && e.target !== togleButton) {
          return;
        }
        this.view.videoPlayer.togglePlay();
      }.bind(this)
    );

    video.addEventListener(
      "timeupdate",
      function () {
        this.view.videoPlayer.updateProgress();
        this.getActiveComment();
      }.bind(this)
    );
    video.addEventListener(
      "ended",
      function () {
        this.view.videoPlayer.showButton();
      }.bind(this)
    );

    const seek = document.getElementById("seek");
    seek.addEventListener(
      "input",
      function () {
        this.view.videoPlayer.skipAhead(seek.value);
      }.bind(this)
    );

    document.addEventListener(
      "keyup",
      function (e) {
        if (e.keyCode == 32) {
          this.view.videoPlayer.togglePlay();
        }
      }.bind(this)
    );
  }

  async loadVideo(v) {
    let video = document.getElementById("video");

    video.children[0].src = "./videos/" + v + ".webm";
    await video.load();
  }

  async loadXml(v) {
    var Connect = new XMLHttpRequest();
    // Define which file to open and
    // send the request.
    Connect.open("GET", "./videos/" + v + ".xml", false);
    Connect.setRequestHeader("Content-Type", "text/xml");
    Connect.send(null);
    // Place the response in an XML document.
    var TheDocument = Connect.responseText;
    // Place the root node in an element.
    // var Customers = TheDocument.childNodes[0];

    return this.model.parseXML(TheDocument);
  }

  getActiveComment() {
    const video = document.getElementById("video");
    let currentTime = video.currentTime;

    for (let i = 0; i < this.model.comments.length; i++) {
      if (
        currentTime >= this.model.comments[i].start &&
        currentTime <= this.model.comments[i].end
      ) {
        this.activeComment = i;
        break;
      }
      if (i == this.model.comments.length - 1) {
        this.activeComment = null;
      }
    }

    if (this.activeComment !== this.lastActiveComment) {
      this.view.activateComment(null);
      this.view.activateCommentText(null);

      if (this.activeComment !== null) {
        this.view.activateComment(this.activeComment);
        this.view.activateCommentText(
          this.model.comments[this.activeComment].fulltext
        );
      }
    }
    this.lastActiveComment = this.activeComment;
  }
}