getCookie = () => {
  let name = "brudi=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return JSON.parse(c.substring(name.length, c.length));
    }
  }
  return "";
}

setCookie = () => {
  const d = new Date();
  d.setTime(d.getTime() + (180*24*60*60*1000)); // 180 days
  const data = JSON.stringify({
    name: document.querySelector("#name input").value,
    iban: document.querySelector("#iban input").value,
    bic: document.querySelector("#bic input").value
  });
  document.cookie = `brudi=${data};expires=${d.toUTCString()};path=/;SameSite=Strict;Secure`;
}

// Field data checks

validateName = (target) => {
  if (target.value.length > 0 && target.value.length <= 70) {
    target.classList.remove("is-danger")
    document.querySelector("#name div span").innerHTML = "&#x2705;";
    if (document.querySelector("#name p")) {
      document.querySelector("#name p").remove();
    }

    regenerate();
  } else {
    target.classList.add("is-danger")
    document.querySelector("#name div span").innerHTML = "&#x274C;";

    if (!document.querySelector("#name p")) {
      const help = document.createElement("p");
      help.classList.add("help", "is-danger");
      help.textContent = "Name can only have 70 characters.";
      document.querySelector("#name").appendChild(help);
    }
  }
}

validateBic = (target) => {
  const re = /^[a-z]{6}[2-9a-z][0-9a-np-z]([a-z0-9]{3}|x{3})?$/i;

  if (re.test(target.value)) {
    target.classList.remove("is-danger")
    document.querySelector("#bic div span").innerHTML = "&#x2705;";
    if (document.querySelector("#bic p")) {
      document.querySelector("#bic p").remove();
    }

    regenerate();
  } else {
    target.classList.add("is-danger")
    document.querySelector("#bic div span").innerHTML = "&#x274C;";

    if (!document.querySelector("#bic p")) {
      const help = document.createElement("p");
      help.classList.add("help", "is-danger");
      help.textContent = "BIC is invalid";
      document.querySelector("#bic").appendChild(help);
    }
  }
}

validateIban = (target) => {
  // IBANs are fucking complicated. this is a hugely simplified check
  const re = /^[a-z]{2}[0-9]{20}$/i;

  if (re.test(target.value)) {
    target.classList.remove("is-danger")
    document.querySelector("#iban div span").innerHTML = "&#x2705;";
    if (document.querySelector("#iban p")) {
      document.querySelector("#iban p").remove();
    }

    regenerate();
  } else {
    target.classList.add("is-danger")
    document.querySelector("#iban div span").innerHTML = "&#x274C;";

    if (!document.querySelector("#iban p")) {
      const help = document.createElement("p");
      help.classList.add("help", "is-danger");
      help.textContent = "IBAN is invalid";
      document.querySelector("#iban").appendChild(help);
    }
  }
}

validateAmount = (target) => {
  if (parseFloat(target.value) > 0) {
    target.classList.remove("is-danger")
    document.querySelector("#amount div span.is-right").innerHTML = "&#x2705;";

    regenerate();
  } else {
    target.classList.add("is-danger")
    document.querySelector("#amount div span.is-right").innerHTML = "&#x274C;";
  }
}

validatePurpose = (target) => {
  const re = /[a-zA-Z0-9\/?:().,'+\- ]{1,140}/i;

  if (re.test(target.value)) {
    target.classList.remove("is-danger")
    document.querySelector("#purpose div span").innerHTML = "&#x2705;";
    if (document.querySelector("#purpose p")) {
      document.querySelector("#purpose p").remove();
    }

    regenerate();
  } else {
    target.classList.add("is-danger")
    document.querySelector("#purpose div span").innerHTML = "&#x274C;";

    if (!document.querySelector("#purpose p")) {
      const help = document.createElement("p");
      help.classList.add("help", "is-danger");
      help.textContent = "Purpose can only have 140 characters and only include A-Z, a-z, 0-9, /?:().,'+- and spaces.";
      document.querySelector("#purpose").appendChild(help);
    }
  }
}

document.querySelector("#name input").addEventListener("input", (event) => {
  validateName(event.target);
});

document.querySelector("#iban input").addEventListener("input", (event) => {
  validateIban(event.target);
});

document.querySelector("#bic input").addEventListener("input", (event) => {
  validateBic(event.target);
});

document.querySelector("#amount input").addEventListener("input", (event) => {
  validateAmount(event.target);
});

document.querySelector("#purpose input").addEventListener("input", (event) => {
  validatePurpose(event.target);
});

// Remember inputs
document.querySelector("#rememberme").addEventListener("change", (event) => {
  if (event.target.checked) {
    console.log("Save Name, IBAN and BIC to cookie..");
    setCookie();
  } else {
    console.log("Remove Cookie..");
  }
})

// qr code generator
regenerate = () => {
  if (document.querySelector("#name input").classList.contains("is-danger")
    || document.querySelector("#iban input").classList.contains("is-danger")
    || document.querySelector("#bic input").classList.contains("is-danger")) {
    console.log("Error in inputs")
  } else {
    document.querySelector('#qr-code').innerHTML = "";
    QrCreator.render({
      text: `BCD
002
1
SCT
${document.querySelector("#bic input").value.toUpperCase()}
${document.querySelector("#name input").value}
${document.querySelector("#iban input").value.toUpperCase()}
EUR${document.querySelector("#amount input").value}


${document.querySelector("#purpose input").value}
`,
      radius: 0.25,
      ecLevel: "H",
      fill: "#fff",
      background: null,
      size: 512
    }, document.querySelector('#qr-code'));

    if (document.querySelector("#rememberme").checked) {
      setCookie()
    }
  }
}

// Fill in form from cookie
const cookie = getCookie();
if (cookie !== "") {
  document.querySelector("#name input").value = cookie.name;
  document.querySelector("#iban input").value = cookie.iban;
  document.querySelector("#bic input").value = cookie.bic;
}

validateName(document.querySelector("#name input"));
validateIban(document.querySelector("#iban input"));
validateBic(document.querySelector("#bic input"));
validateAmount(document.querySelector("#amount input"));
validatePurpose(document.querySelector("#purpose input"));

// generate qr code on first visit
regenerate();