// **************** VARS

"use strict";

var about = document.querySelector("[name=about]");
var errorsAbout = document.querySelector(".errors-about");

var company = document.querySelector("[name=company]");
var errorsCompany = document.querySelector(".errors-company");

var cases = document.querySelectorAll("[name=cases]");
var errorscases = document.querySelectorAll(".errors-cases");
var labelCases = document.querySelectorAll(".cases-label");
var casesValue;

var errorsEmail = document.querySelector(".errors-email");
var inputEmail = document.getElementById("email");

var errorsPhone = document.querySelector(".errors-phone");
var inputPhone = document.querySelector("[name=phone]");

var errorsMore = document.querySelector(".errors-more");
var inputMore = document.querySelector("[name=more]");

var errorsRadio = document.querySelector(".errors-radio");

var attachments = document.querySelectorAll("[type=file]");
var errorsFiles = document.querySelector('.errors-attachments');

var remove = document.querySelectorAll(".clear-attach");

//************ATTACHMENTS

for (var i = 0; i < remove.length; i++) {
  remove[i].addEventListener("click", function(event) {
    var parentEl = event.target.parentElement;
    parentEl.classList.remove("attached");
    parentEl.querySelector("[type=file]").value = "";
    validateFiles();
  });
}

for (var i = 0; i < attachments.length; i++) {
  attachments[i].addEventListener("change", function(event) {
    clearFiles();
    var img = event.target.previousElementSibling;
    event.target.parentElement.classList.add("attached");
    if (!/\.(jpe?g|png|gif)$/i.test(event.target.files[0].name)) {
      img.setAttribute("src", "//onas.wpcdn.pl/img/placeholder.png");
    } else {
      var reader = new FileReader();
      reader.onload = function(e) {
        if (e.target.result) {
          var src = e.target.result;
          img.setAttribute("src", src);
        }
      };
      reader.readAsDataURL(event.target.files[0]);
    }
    validateFiles();
  });
}

document.querySelector(".btn").addEventListener("click", function() {
  var counter = 0;
  var x = setInterval(function() {
    if (counter < 10) {
      document.querySelector(".errors-attachments").textContent =
        "Możesz dodać maksymalnie 3 pliki.";
      counter++;
    } else {
      document.querySelector(".errors-attachments").textContent = "";
      clearInterval(x);
    }
  }, 300);
});

// **************** CLEARING

function clearAbout() {
  errorsAbout.textContent = "";
  about.classList.remove("errors-border");
  document.querySelector(".about-label").classList.remove("error-text");
}

function clearCompany() {
  errorsCompany.textContent = "";
  company.classList.remove("errors-border");
  document.querySelector(".company-label").classList.remove("error-text");
}

for (var i = 0; i < cases.length; i++) {
  cases[i].classList.remove("errors-border");
  errorscases[i].textContent = "";
  labelCases[i].classList.remove("error-text");
}

function clearEmail() {
  errorsEmail.textContent = "";
  inputEmail.classList.remove("errors-border");
  inputEmail.previousElementSibling.previousElementSibling.classList.remove(
    "error-text"
  );
}

function clearPhone() {
  errorsPhone.textContent = "";
  inputPhone.classList.remove("errors-border");
  inputPhone.previousElementSibling.classList.remove("error-text");
}

function clearMore() {
  errorsMore.textContent = "";
  inputMore.classList.remove("errors-border");
  inputMore.previousElementSibling.classList.remove("error-text");
}

function clearRadios() {
  errorsRadio.textContent = "";
  document.querySelector(".radio-label").classList.remove("error-text");
}

function clearFiles() {
  errorsFiles.textContent = "";  
}

// ***************** EVENTS FOR CLEARING ERRORS STATE

about.addEventListener("click", function() {
  // console.dir(this);
  clearAbout();
});

company.addEventListener("click", function() {
  clearCompany();
});

for (var i = 0; i < cases.length; i++) {
  cases[i].addEventListener("click", function() {
    this.classList.remove("errors-border");
    this.nextElementSibling.textContent = "";
    this.previousElementSibling.classList.remove("error-text");
  });
}

inputEmail.addEventListener("click", function() {
  clearEmail();
});

inputPhone.addEventListener("click", function() {
  clearPhone();
});

inputMore.addEventListener("click", function() {
  clearMore();
});

document.querySelector("[value=Tak]").addEventListener("click", function() {
  clearRadios();
});

document.querySelector("[value=Nie]").addEventListener("click", function() {
  clearRadios();
});

// ***************** SHOW ERRORS IN REAL TIME

about.addEventListener("blur", function() {
  validateAbout();
});

company.addEventListener("blur", function() {
  validateCompany();
});

for (var i = 0; i < cases.length; i++) {
  cases[i].addEventListener("blur", function() {
    validateCases();
  });
}

inputEmail.addEventListener("blur", function() {
  validateEmail();
});

inputPhone.addEventListener("blur", function() {
  validatePhone();
});

inputMore.addEventListener("keypress", function() {
  validateMore();
});

// ****************  VALIDATIONS

function validateAbout() {
  var selected = about.isConnected ? about.value : undefined;
  if (!selected) {
    errorsAbout.textContent = "Proszę wybrać jedną z dostępnych opcji.";
    about.classList.add("errors-border");
    document.querySelector(".about-label").classList.add("error-text");
  }
  return selected;
}

function validateCompany() {
  var selected = company.isConnected ? company.value : undefined;
  if (!selected) {
    errorsCompany.textContent = "Proszę wybrać jedną z dostępnych opcji.";
    company.classList.add("errors-border");
    document.querySelector(".company-label").classList.add("error-text");
  }
  return selected;
}

function validateCases() {
  var isValid = false;

  var i = 0;
  while (!isValid && i < cases.length) {
    if (cases[i].isConnected && cases[i].value) {
      isValid = true;
    }
    casesValue = cases[i].isConnected ? cases[i].value : undefined;
    i++;
  }
  if (!isValid) {
    for (var i = 0; i < cases.length; i++) {
      cases[i].classList.add("errors-border");
      errorscases[i].textContent = "Proszę wybrać jedną z dostępnych opcji.";
      labelCases[i].classList.add("error-text");
    }
  }
  return isValid;
}

function validateEmail() {
  var email = document.querySelector("#email").value;

  if (email.length === 0) {
    errorsEmail.textContent = "To pole jest wymagane.";
    inputEmail.classList.add("errors-border");
    inputEmail.previousElementSibling.previousElementSibling.classList.add(
      "error-text"
    );
    return false;
  }

  var isValid = checkEmail(email);

  if (!isValid) {
    errorsEmail.textContent = "Proszę wprowadzić poprawny adres e-mail.";
    inputEmail.classList.add("errors-border");
    inputEmail.previousElementSibling.previousElementSibling.classList.add(
      "error-text"
    );
  }

  return isValid;
}

function validatePhone() {
  var phone = inputPhone.isConnected ? inputPhone.value : undefined;
  var isValid = checkPhone(phone);
  if (!isValid) {
    errorsPhone.textContent = "Proszę wprowadzić poprawny numer telefonu.";
    inputPhone.classList.add("errors-border");
    inputPhone.previousElementSibling.classList.add("error-text");
  }

  return isValid;
}

function validateFiles() {
  var i = 0;  
  var j =0;
  var size = 0;
  while(i < attachments.length) {
    j = 0;
    while(j < attachments[i].files.length) {
      size += attachments[i].files[j].size;
      j++;
    }
    i++;
  }
  //~100mb
  var isValid = size <100000000;
  if (!isValid) {
    errorsFiles.textContent = "Rozmiar plików może wynosić maksymalnie 100MB";
  } else {
    errorsFiles.textContent = "";
  }

  return isValid;
}

function validateMore() {
  var more = inputMore.value;
  if (more.length === 0) {
    return true;
  } else if (more.length > 1999) {
    errorsMore.textContent =
      "Twoja wiadomość nie powinna przekraczać limitu 2000 znaków.";
    inputMore.classList.add("errors-border");
    inputMore.previousElementSibling.classList.add("error-text");
  }

  return true;
}

function validateYesNo() {
  var yesNo = document.getElementsByName("active_acc");
  var isValid = false;

  var i = 0;
  while (!isValid && i < yesNo.length) {
    if (yesNo[i].checked) isValid = true;
    i++;
  }

  if (!isValid) {
    errorsRadio.textContent = "Proszę wybrać jedną z dostępnych opcji.";
    document.querySelector(".radio-label").classList.add("error-text");
  }
  return isValid;
}

function validateReCaptcha() {
  var captcha = document.getElementById("grecaptcha_element");
  var response = grecaptcha.getResponse();
  if (response.length === 0) {
    document.querySelector(".errors-captcha").textContent =
      "To pole jest wymagane.";
    return false;
  }
  document.querySelector(".errors-captcha").textContent = "";
  return true;
}

function checkEmail(emailAddress) {
  var sQtext = "[^\\x0d\\x22\\x5c\\x80-\\xff]";
  var sDtext = "[^\\x0d\\x5b-\\x5d\\x80-\\xff]";
  var sAtom =
    "[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+";
  var sQuotedPair = "\\x5c[\\x00-\\x7f]";
  var sDomainLiteral = "\\x5b(" + sDtext + "|" + sQuotedPair + ")*\\x5d";
  var sQuotedString = "\\x22(" + sQtext + "|" + sQuotedPair + ")*\\x22";
  var sDomain_ref = sAtom;
  var sSubDomain = "(" + sDomain_ref + "|" + sDomainLiteral + ")";
  var sWord = "(" + sAtom + "|" + sQuotedString + ")";
  var sDomain = sSubDomain + "(\\x2e" + sSubDomain + ")*";
  var sLocalPart = sWord + "(\\x2e" + sWord + ")*";
  var sAddrSpec = sLocalPart + "\\x40" + sDomain; // complete RFC822 email address spec
  var sValidEmail = "^" + sAddrSpec + "$"; // as whole string

  var reValidEmail = new RegExp(sValidEmail);

  return reValidEmail.test(emailAddress);
}

function checkPhone(p) {
  if (p.length === 0) {
    return true;
  } else if (
    p.search("[0-9]") === -1 ||
    p.search("[a-zA-Z]") > -1 ||
    p.length > 20 ||
    (p.length > 0 && p.length < 7) ||
    /[!@#$%^&*()_\=\[\]{};':"\\|,.<>\/?]/i.test(p)
  ) {
    return false;
  }
  return true;
}

clearAbout();
clearCompany();
for (var i = 0; i < cases.length; i++) {
  cases[i].classList.remove("errors-border");
  errorscases[i].textContent = "";
  labelCases[i].classList.remove("error-text");
}
clearEmail();
clearPhone();
clearMore();
clearRadios();
clearFiles();