class VideoInteraction {
  constructor() {
    this.video = null;
    this.perguntas = null;
    this.configVideo = {};
    this.start = 0;
    this.countCena = null;
    this.interval = null;
  }

  renderVideo(objetoVideo) {
    var _self = this;
    Swal.fire({
      grow: "fullscreen",

      html: `<div class="video">
                            <div class="intection" id="intection">
                            </div>
                            <video id="video"> 
                                <source src="./src/videos/modulo${config.id_modulo}/${objetoVideo.video}" type="video/mp4">
                                <source src="movie.ogg" type="video/ogg">
                            Your browser does not support the video tag.
                            </video>
                            <div id="play">
                                <button onclick="window.playVideo()">
                                    <i class="fas fa-play"></i>
                                </button>
                            </div>
                        </div>`,
      width: "100%",
      confirmButtonText: "Sair",
      showCloseButton: true,
    });

    this.configVideo = objetoVideo;

    this.video = document.getElementById("video");

    $(".swal2-close, .swal2-confirm").click(function (e) {
      e.preventDefault();
      _self.resetConfigVideo();
    });
  }

  resetConfigVideo() {
    this.configVideo.countCena = 0;
    this.configVideo.tempo = 0;
    this.configVideo.corteCena[0].inicio = 0;
    this.video.currentTime = 0;
    this.start = 0;
    clearInterval(this.interval);
  }

  playVideo() {
    console.log(this.video.play);
    this.controllerCenas();
    this.toogleCena("play", "none");
  }

  controllerCenas() {
    this.video.play();
    var _self = this;
    const corteCena = this.configVideo.corteCena[this.configVideo.countCena];
    console.log(corteCena);
    this.countCena = Math.floor(corteCena.fim);
    this.start = corteCena.inicio;
    this.perguntas = this.renderPerguntas();

    this.interval = setInterval(function () {
      if (_self.countCena === _self.start) {
        console.log(_self.countCena);
        console.log(_self.start);
        console.log(_self.configVideo.tempo);
        _self.configVideo.tempo = _self.start;
        _self.video.pause();
        if (_self.configVideo.countCena == 0) {
          _self.configVideo.countCena = 1;
          _self.toogleCena("intection", "flex");
          _self.renderContainer("intection", _self.perguntas);
        } else {
          _self.toogleCena("intection", "flex");
          _self.renderContainer("intection", _self.feedBackInterect());
          $('[data-toggle="tooltip"]').tooltip({ trigger: "focus" });
        }
      }
      if (_self.start <= _self.countCena) {
        _self.start++;
        clearInterval();
        return;
      }
    }, 1000);
  }

  renderPerguntas() {
    var cont = 1;
    const conteudo = this.configVideo.perguntas.map((elem, i) => {
      const item = `<div class="questao_item" onclick="window.restartCena(${cont})">
                                <div class="questao_item-left">
                                 <span>${
                                   elem.item != undefined ? elem.item : cont
                                 }</span>
                                </div>
                                <div class="questao_item-right">
                                   ${elem.descricao}
                                </div>
                                <div class='borda-bottom'></div>
                            </div>`;
      cont++;
      return item;
    });

    return `<div class="questao_itens">${conteudo.join("")}</div>`;
  }

  restartCena(val) {
    this.configVideo.countCena = val;
    const corteCena = this.configVideo.corteCena[this.configVideo.countCena];
    console.log("restartCena");
    console.log(corteCena.inicio);
    this.video.currentTime = corteCena.inicio;
    this.toogleCena("intection", "none");
    this.countCena = Math.floor(corteCena.fim);
    this.start = corteCena.inicio;
    this.video.play();
  }

  controllVideo(val) {
    var _self = this;
    switch (val) {
      case "replay":
        const corteCena = this.configVideo.corteCena[
          this.configVideo.countCena
        ];
        this.start = corteCena.inicio;
        this.video.currentTime = corteCena.inicio;
        this.countCena = Math.floor(corteCena.fim);
        _self.toogleCena("intection", "none");
        this.video.play();

        break;

      case "opcao":
        _self.toogleCena("intection", "flex");
        _self.renderContainer("intection", _self.perguntas);

        break;

      case "inicio":
        _self.resetConfigVideo();
        _self.toogleCena("intection", "none");
        _self.toogleCena("play", "flex");
        this.video.pause();

        break;
      default:
        break;
    }
  }

  toogleCena(div, acao) {
    document.getElementById(div).style["display"] = acao;
  }

  renderContainer(div, container) {
    document.getElementById(div).innerHTML = container;
  }

  feedBackInterect() {
    return `<div class="feedback_final">
                    <a href="javaSCript:void(0);" onclick="window.controllVideo('replay')" data-placement="top"  data-toggle="tooltip" title="Voltar ao início"><i class="fas fa-undo-alt"></i></a>
                    <a href="javaSCript:void(0);" onclick="window.controllVideo('opcao')" data-placement="top"  data-toggle="tooltip" title="Responder novamente"><i class="fas fa-bars"></i></a>
                    <a href="javaSCript:void(0);" onclick="window.controllVideo('inicio')" data-placement="top"  data-toggle="tooltip" title="Fechar"><i class="fas fa-times"></i></a>
                </div>`;
  }
}
