class View {
  constructor() {
    this.init();
  }

  init() {
    //this.colorTogglePlaySVG();

    this.videoPlayer = new VideoPlayer();

    /* Obarvení aktivního komentáře - dát do special metody */
    /*     var mySVG = document.getElementsByClassName("activeIcon")[0];
    var svgDoc;
    mySVG.addEventListener(
      "load",
      function () {
        svgDoc = mySVG.contentDocument;
        svgDoc.getElementById("path4").style.fill = "#ffa800";
      },
      false
    ); */
  }

  drawCommentsText(comments) {
    let aside = document.getElementsByTagName("aside")[0];

    for (let i = 0; i < comments.length; i++) {
      let comment = document.createElement("div");
      comment.setAttribute("class", "comment");

      let object = document.createElement("object");
      object.setAttribute("class", "icon");
      object.setAttribute("data", "./img/closed-captioning.svg");
      object.setAttribute("type", "image/svg+xml");

      comment.appendChild(object);

      let time = document.createElement("div");
      time.setAttribute("class", "time");
      time.innerHTML = comments[i].start;

      comment.appendChild(time);

      let commentText = document.createElement("div");
      commentText.setAttribute("class", "commentText");
      commentText.innerHTML = comments[i].text;

      comment.appendChild(commentText);

      aside.appendChild(comment);
    }
  }

  drawCommentsToVideo(comments, lenght) {
    let videoProgress = document.getElementById("video-progress");

    for (let i = 0; i < comments.length; i++) {
      let videoComment = document.createElement("div");
      videoComment.setAttribute("class", "videoComment");
      let percentLeft = (comments[i].start / lenght) * 100;
      videoComment.style.left = percentLeft + "%";
      let percentWidth = ((comments[i].end - comments[i].start) / lenght) * 100;
      videoComment.style.width = percentWidth + "%";

      let img = document.createElement("img");
      img.setAttribute("src", "./img/note.svg");
      videoComment.appendChild(img);

      videoProgress.appendChild(videoComment);
    }
  }

  /* colorTogglePlaySVG() {
    var playSVG = document.getElementById("togglePlayIcon");
    var svgDoc;
    playSVG.addEventListener(
      "load",
      function () {
        svgDoc = playSVG.contentDocument;
        svgDoc.getElementById("path4").style.fill = "#ffa800";
      },
      false
    );
  } */
}