class ExerciciosScorm {
  constructor() {
    this.countSection = 0;
    this.dados = null;
    this.input = null;
    this.atividade = {};
    this.modelo = null;
    this.button = null;
    this.classe = null;
    this.returnCheckProject = null;
    this.container = null;
    this.spinner = `<div class="spinner-grow pull-center" role="status"><span class="sr-only">Loading...</span></div>`;
  }

  renderQuestao(objeto) {
    if (objeto != undefined) {
      this.returnCheckProject = objeto.dadosScorm;
      this.atividade.count = 0;
      const feed = objeto.dados.questao[this.atividade.count];
      this.atividade.questaoDados = objeto.dados.questao;
      this.atividade.actionRedirect = objeto.dados.actionRedirect;
      this.atividade.class = objeto.dados.class;
      this.atividade.limitQuestaoSelect = objeto.dados.questao.length;

      this.atividade.feedbackCorreto =
        feed.feedbackCorreto != undefined
          ? feed.feedbackCorreto
          : this.atividade.feedbackCorreto;

      this.atividade.feedbackIncorreto =
        feed.feedbackIncorreto != undefined
          ? feed.feedbackIncorreto
          : this.atividade.feedbackIncorreto;

      this.classe = objeto.dados.class;
    }

    this.dados = this.atividade.questaoDados[this.atividade.count];

    this.modelo = this.dados.modelo;
    this.atividade.itensSelected = [];
    this.container = document.querySelector(`.${this.atividade.class}`);
    this.container.innerHTML = this.spinner;

    switch (this.modelo) {
      case "alternativa":
        this.renderExercicioAlternativas().then((res) => {
          this.renderVariavel();
        });
        break;

      case "assinalar":
        this.renderExercicioAssinalar().then((res) => {
          this.renderVariavel();
        });
        break;

      case "verdadeiroOUfalso":
        this.renderExercicioVerdadeiroOUfalso().then((res) => {
          this.renderVariavel();
        });
        break;
    }
  }

  renderVariavel() {
    this.button = document.getElementsByClassName("responder")[0];
  }

  async renderExercicioVerdadeiroOUfalso() {
    try {
      //Render conteudo exercicicio
      await this.renderItemExercicio().then((res) => {
        this.renderContainerExercicio(res);
        const input = document.querySelectorAll(
          `.${this.classe} .alternativaVF input`
        );
        var resposta = [];
        var countCheck = 0;
        var limitForm = input.length;

        input.forEach(($elem) => {
          $elem.addEventListener("input", (e) => {
            const value = e.target.value.toUpperCase();

            if (value == "") {
              countCheck = countCheck - 1;
            }
            if (value == "V" || value == "F") {
              value
                ? (countCheck =
                    countCheck == limitForm ? limitForm : countCheck + 1)
                : countCheck - 1;
            } else {
              e.target.value = "";
            }

            countCheck == limitForm
              ? this.button.classList.remove("invisible")
              : this.button.classList.add("invisible");
          });
        }, false);

        document.getElementById("confirmar").addEventListener("click", () => {
          input.forEach((elem, i) => {
            const value = elem.value.toUpperCase();
            if (value === "") {
              this.alertSweet({
                action: null,
                feedback: "Todos os campos devem ser preenchido!",
                resposta: false,
                finalQuesta: true,
              });

              return true;
            } else {
              resposta = this.dados.cards[i].resposta;
              this.atividade.itensSelected.push({
                check: 1,
                action: value == resposta ? true : false,
              });
            }
          });

          if (this.atividade.itensSelected.length == this.dados.cards.length) {
            const retorno = this.atividade.itensSelected.filter(
              (elem) => elem.action === false
            ).length;
            const retornoFeedBack = this.renderFeedbackExercicio(
              this.atividade.itensSelected
            );

            const action = retorno > 0 ? false : true;
            this.alertSweet({
              action: action,
              feedback: retornoFeedBack,
              resposta: action,
              finalQuesta: true,
            });

            if (action) {
              this.atividade.count = this.atividade.count + 1;
            }
          }

          this.atividade.itensSelected = [];
        });
      });
    } catch (err) {
      alert("Não foi possível gerar o exercício");
    }
  }

  async renderExercicioAssinalar() {
    try {
      //Render conteudo exercicicio
      await this.renderItemExercicio().then((response) => {
        this.renderContainerExercicio(response);
        this.rederCheckItem();

        document.getElementById("confirmar").addEventListener("click", () => {
          const questao = this.dados.cards;
          const selected = this.atividade.itensSelected;
          const arResposta = [];

          questao.map((elem, i) => {
            const selectedAction = selected[i];
            if (selectedAction.check > 0) {
              arResposta.push(
                elem.resposta == true && selectedAction.action == true
                  ? true
                  : false
              );
            }
          });

          const action =
            arResposta.filter((elem) => elem === false).length > 0
              ? false
              : true;
          const retornoFeedBack = this.renderFeedbackExercicio(
            this.atividade.itensSelected
          );

          this.alertSweet({
            action: action,
            feedback: retornoFeedBack,
            resposta: action,
            finalQuesta: true,
          });

          if (action) {
            this.atividade.count = this.atividade.count + 1;
          }
        });
      });
    } catch (error) {
      alert("Não foi possível gerar o exercício");
    }
  }

  async renderExercicioAlternativas() {
    try {
      //Render conteudo exercicicio
      await this.renderItemExercicio().then((response) => {
        this.renderContainerExercicio(response);
        this.rederCheckItem();

        document.getElementById("confirmar").addEventListener("click", () => {
          var checheResposta = [];
          var resposta = [];
          this.atividade.itensSelected.map((elem, i) => {
            resposta = this.dados.cards[i].resposta;

            this.atividade.itensSelected.valueOf()[i].action =
              elem.action == resposta ? elem.action : false;
            checheResposta.push(elem.action == resposta ? true : false);
          });

          const retorno = checheResposta.filter((elem) => elem === false)
            .length;
          const retornoFeedBack = this.renderFeedbackExercicio(
            this.atividade.itensSelected
          );
          const action = retorno > 0 ? false : true;

          this.alertSweet({
            action: action,
            feedback: retornoFeedBack,
            resposta: action,
            finalQuesta: true,
          });

          if (action) {
            this.atividade.count = this.atividade.count + 1;
          }
        });
      });
    } catch (err) {
      alert("Não foi possível gerar o exercício 1");
    }
  }

  async renderItemExercicio() {
    try {
      var itens;
      var lista = this.dados.cards;

      const listCards = lista.map((elem, i) => {
        switch (this.modelo) {
          case "verdadeiroOUfalso":
            itens = `<li class="alternativaVF mb-2">
                                          <div class='itens w-100'>
                                              <div class="numeracao col-md-1">
                                                  <input type="text" class="form-control text-uppercase text-center" maxlength="1" id="${i}" style="width: 40px;">
                                              </div>
                                              <div class="descricao col-md-11"> ${elem.descricao}</div>
                                          </div>
                                      </li>`;
            break;

          default:
            this.atividade.itensSelected.push({ check: 0, action: false });
            itens = `<li id='itens_${i}'>
                                          <a href="javaScript:void(0)" id="${i}">
                                              <div class="numeracao"> ${elem.titulo}</div>
                                              <div class="descricao">
                                              ${elem.descricao}
                                              </div>
                                          </a>
                                      </li>`;
            break;
        }

        return itens;
      });

      const container = `<ul class="container-questao-conteudo-lista p-3">
                            ${listCards.join("")}
                        </ul>`;

      return container;
    } catch (err) {
      alert("Não foi possível gerar o exercício");
    }
  }

  rederCheckItem() {
    this.input = document.querySelectorAll(
      ".container-questao-conteudo-lista  li a"
    );
    this.input.forEach(($elem) => {
      $elem.addEventListener("click", (e) => {
        const item = e.path[1];
        const id = item.id;
        var self = this;
        const value = e.path[1].classList.value;

        if (this.dados.tipo === "radio") {
          this.check(value, id, this.dados);
          item.classList.add("active");
        } else {
          this.check(value, id, this.dados);
          if (value == "active") {
            item.classList.remove("active");
          } else {
            item.classList.add("active");
          }
        }

        const checkItem = this.atividade.itensSelected.filter(
          (elem) => elem.action === true
        ).length;
        checkItem > 0
          ? this.button.classList.remove("invisible")
          : this.button.classList.add("invisible");
      });
    }, false);
  }

  check(value, id, dados) {
    if (dados.tipo === "radio") {
      this.input.forEach((elem) => elem.classList.remove("active"));
      this.atividade.itensSelected.map((elem) => {
        elem.check = 0;
        elem.action = false;
      });
    }

    if (value == "active") {
      this.atividade.itensSelected.valueOf()[id].check = 0;
      this.atividade.itensSelected.valueOf()[id].action = false;
    } else {
      this.atividade.itensSelected.valueOf()[id].check = 1;
      this.atividade.itensSelected.valueOf()[id].action = true;
    }
  }

  renderContainerExercicio(conteudo) {
    const limit = this.atividade.limitQuestaoSelect;
    const retorno = `<div class="container">
                          <div class="row">
                              <div class="col-md-12">
                                   <p class="titulo-pagina float-left">EXERCITANDO</p>
                              </div>
                              <div class="col-md-12">
                                  <div class="container-questao">
                                      <div class="container-questao-titulo mb-3 p-3">
                                      <div class="numeracao">
                                           <div class="one"> 
                                               ${this.atividade.count + 1}
                                           </div>
                                           ${
                                             limit > 1
                                               ? `<div class="tow font-16"> de ${this.atividade.limitQuestaoSelect}</div>`
                                               : ""
                                           }
                                      </div>
                                      <div class="descricao text-white font-16"> 
                                          ${this.dados.titulo}
                                      </div>
                                  </div>
                              <div>
                              ${
                                this.dados.imagem != undefined
                                  ? `<div class='row'>
                                  <div class="col-md-8 mb-3">${conteudo}</div>
                                  <div class="col-md-4 d-flex align-items-center mb-3">
                                      <div class="lupa pull-center">
                                          <a href="javaScript:void(0);" onclick="renderModal('${this.dados.imagem}')">
                                              <i class="fas fa-search"></i>
                                          </a>
                                          <img class="img-fluid pull-center" src="./src/img/modulos/modulo${config.id_modulo}/${this.dados.imagem}">
                                      </div>
                                  </div>
                              </div>`
                                  : `${conteudo}`
                              }
                              <button class="responder confirmar invisible" id="confirmar">Responder</button>
                              </div>
                              </div>
                          </div>  
                      </div>`;

    this.container.innerHTML = retorno;
  }

  renderFeedbackExercicio(params) {
    var icon;
    var text;
    var feedback;
    var checkSuccess = `<i class="far fa-check-circle"></i>`;
    var checkError = `<i class="far fa-times-circle"></i>`;
    var textSuccess = `text-success`;
    var textError = `text-danger`;

    const retorno = params.map((elem, i) => {
      if (elem.check == 1) {
        const questao = this.dados.cards[i];

        switch (this.modelo) {
          case "verdadeiroOUfalso":
            feedback = elem.action
              ? questao.feedback
              : "Resposta incorreta! Releia os assuntos para compreendê-los melhor.";
            break;

          default:
            feedback = questao.feedback;
            break;
        }

        if (this.dados.tipo == "radio") {
          icon = questao.resposta ? checkSuccess : checkError;
          text = questao.resposta ? textSuccess : textError;
        } else {
          icon = elem.action == true ? checkSuccess : checkError;
          text = elem.action == true ? textSuccess : textError;
        }

        return `<li class="list-group-item"><span class='${text}'> ${feedback}</span></li>`;
      }
    });

    return `<ul class="list-group list-group-flush text-left">${retorno.join(
      ""
    )}</ul>`;
  }

  alertSweet(objeto) {
    const class_icone = objeto.resposta ? "success" : "error";
    const feedText = objeto.finalQuesta
      ? objeto.feedback
      : objeto.resposta
      ? this.atividade.feedbackCorreto
      : this.atividade.feedbackIncorreto;
    var self = this;
    Swal.fire({
      icon: class_icone,
      html: `<span class="text-dark font-16">${feedText}</span>`,
      confirmButtonColor: "#909090",
      customClass: { content: "swal2-bg" },
    }).then(function () {
      if (objeto.action) {
        if (self.atividade.count <= self.atividade.limitQuestaoSelect - 1) {
          self.renderQuestao();
        } else {
          self.returnCheckProject.controllArticle[config.id_modulo].article =
            self.returnCheckProject.controllArticle[config.id_modulo].article +
            1;
          self.countSection = 0;
          self.atividade.count = 0;

          self.renderControllSection();
        }
      }
    });
  }

  renderControllSection() {
    const conteudo = `<div class='post feedback'>
                                          <div class="container-fluid">
                                              <div class="row">
                                                  <div class="col-md-8"></div>
                                                  <div class="col-md-4 d-flex align-items-center">
                                                      <div class="card border-success pull-center w-75 border-radius-20">
                                                          <div class="card-body">
                                                              <div 
                                                                  class="card-text d-flex align-items-center mb-3">
                                                                  Parabéns! Você concluiu a atividade! Entretanto, nosso estudo não para por aqui! Avance para continuar os estudos!
                                                              </div>
                                                              <div class="card-footer bg-transparent border-0">
                                                                  <button 
                                                                      class="btn btn-primary button-next-section pull-center border-radius-20" 
                                                                      type="button"
                                                                      onclick="window.renderControllerNextSection({id:${
                                                                        this
                                                                          .returnCheckProject
                                                                          .controllArticle[
                                                                          config
                                                                            .id_modulo
                                                                        ]
                                                                          .article
                                                                      },update:true
                                                                      ,idModulo:${
                                                                        config.id_modulo
                                                                      }
                                                                    })">
                                                                      Próxima parte
                                                                  </button>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>`;
    this.atividade = {};
    this.container.innerHTML = conteudo;
  }

  exerciocioTable(objeto) {
    this.atividade.count = 0;
    this.atividade.limitQuestaoSelect = 1;
    this.atividade.actionRedirect = false;
    this.atividade.class = "section_10";
    this.returnCheckProject = objeto.dadosScorm;
    this.container = document.querySelector(`.${this.atividade.class}`);
    const img = `<p><img class="img-fluid pull-center" src="./src/img/modulos/modulo2/parte2/feedback.png" alt=""></p>`;
    var inteiro = Array(3, 6, 3, 5);
    var porcetagem = Array("16,7%​", "25%​", "4,2%​", "8,3%​");
    var resposta = [];
    const inputInteiro = document.querySelectorAll(
      ".table-exerciocio .inteiro"
    );
    const inputPorcetagem = document.querySelectorAll(
      ".table-exerciocio .porcetagem"
    );

    inputInteiro.forEach((elem, i) => {
      if (elem.value == inteiro[i]) {
        resposta.push(true);
      } else {
        resposta.push(false);
      }
    });

    inputPorcetagem.forEach((elem, i) => {
      if (
        parseInt(elem.value.replace(",", "").replace("%", "")) ==
        parseInt(porcetagem[i].replace(",", "").replace("%", ""))
      ) {
        resposta.push(true);
      } else {
        resposta.push(false);
      }
    });

    //Se tiver algum valor falso, questao errada
    const retorno = resposta.filter((elem) => elem === false).length;

    var feedback = false;
    var action = false;

    if (retorno > 0) {
      action = false;
      feedback = `<p>Resposta incorreta!</p> ${img}`;
    } else {
      this.atividade.count = 1;
      action = true;
      feedback = `<p>Resposta correta!</p> ${img}`;
    }

    this.alertSweet({
      action: action,
      feedback: feedback,
      resposta: action,
      finalQuesta: true,
    });
  }
}
