import copyContent from "@assets/js/copyContent";

document.addEventListener("DOMContentLoaded", function() {
  const buttonTestConnection = document.querySelector(
    ".js-validate-credentials"
  );
  const validateCredentialsUrl = buttonTestConnection.dataset.url;
  const inputtoken = document.getElementsByClassName("js-rede_token");
  const viewPassword = document.getElementsByClassName("js-password-view");
  const btnCopyTokenization = document.querySelector("#btn_copy_tokenization");

  const inputPv = document.getElementsByClassName("js-rede_pv");
  const viewPv = document.getElementsByClassName("js-pv-view");

  let request = false;

  const credentialId = document.querySelector('input[name="rede_token"]');
  const credentialKey = document.querySelector('input[name="rede_pv"]');

  function handleAuthenticateButton() {
    if (!credentialId.value || !credentialKey.value) {
      buttonTestConnection.setAttribute("disabled", true);
    } else {
      buttonTestConnection.removeAttribute("disabled", true);
    }
  }

  handleAuthenticateButton();

  credentialId.addEventListener("change", handleAuthenticateButton);
  credentialKey.addEventListener("change", handleAuthenticateButton);

  btnCopyTokenization.addEventListener("click", copyLink);

  function copyLink(e) {
    const urlTokenization = document.querySelector("#url_tokenization")
      .textContent;
    copyContent(urlTokenization);

    document.querySelector("#btn_copy_tokenization span").textContent =
      "Copiado";
    setTimeout(() => {
      document.querySelector("#btn_copy_tokenization span").textContent =
        "Copiar";
    }, 2000);
  }

  function validateCredentials(e) {
    e.preventDefault();

    if (request) {
      return;
    }

    this.classList.add("btn-loading");
    this.disabled = true;

    request = true;

    window
      .axiosApi({
        method: "get",
        url: validateCredentialsUrl,
        params: { rede_token: credentialId.value, rede_pv: credentialKey.value }
      })
      .then(({ data }) => {
        notificationMsg(data.message, data.type);
      })
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.classList.remove("btn-loading");
        this.disabled = false;
        request = false;
      });
  }

  buttonTestConnection.addEventListener("click", validateCredentials);

  viewPassword.item(0).addEventListener("click", function() {
    let type =
      inputtoken.item(0).getAttribute("type") == "text" ? "password" : "text";

    viewPassword
      .item(0)
      .classList.remove(type == "text" ? "fa-eye" : "fa-eye-slash");
    viewPassword
      .item(0)
      .classList.add(type == "password" ? "fa-eye" : "fa-eye-slash");
    inputtoken.item(0).setAttribute("type", type);
  });

  viewPv.item(0).addEventListener("click", function() {
    let type =
      inputPv.item(0).getAttribute("type") == "text" ? "password" : "text";

    viewPv.item(0).classList.remove(type == "text" ? "fa-eye" : "fa-eye-slash");
    viewPv
      .item(0)
      .classList.add(type == "password" ? "fa-eye" : "fa-eye-slash");
    inputPv.item(0).setAttribute("type", type);
  });
});
