document.addEventListener("DOMContentLoaded", function () {
  initListerers()
});

const initListerers = () => {
  setTimeout(() => {
    document.querySelectorAll("._input_text").forEach(function (element) {
      if (element.readOnly) return;
      element.addEventListener("focus", function () {
        element.style.outline = "2px solid #00a2ad";
        element.nextElementSibling.innerHTML = "";
      });
      element.addEventListener("focusout", () => {
        element.style.outline = "2px solid #e0e0e0";
      });
      if (element.getAttribute("data-validation") == "_otp") {
        const digitsAllowed = 6;
        element.addEventListener("keyup", (e) => {
          const buttonId = element.id.replace("Input", "Button");
          if (e.target.value.length > digitsAllowed) {
            element.value = e.target.value.substring(0, digitsAllowed);
          } else if (e.target.value.length === digitsAllowed) {
            document
              .getElementById(buttonId)
              .classList.remove("_button_disabled");
          } else {
            document.getElementById(buttonId).classList.add("_button_disabled");
          }
        });
        element.addEventListener("focusout", (e) => {
          if (e.target.value.length < digitsAllowed) {
            element.style.outline = "2px solid #f34213";
          }
        });
      }

      if (element.getAttribute("data-validation") == "_phone") {
        element.addEventListener("focusout", (e) => {
          if (e.target.value == "" || numberValidation(e.target.value).valid) {
            element.style.outline = "2px solid #e0e0e0";
          } else {
            element.style.outline = "2px solid #f34213";
          }
        });
      }

      if (element.getAttribute("data-validation") == "_email") {
        element.addEventListener("focusout", (e) => {
          if (e.target.value == "" || emailValidation(e.target.value)) {
            element.style.outline = "2px solid #e0e0e0";
          } else {
            element.style.outline = "2px solid #f34213";
          }
        });
      }
      if (element.getAttribute("data-validation") == "_password") {
        element.addEventListener("focusout", (e) => {
          if (e.target.value == "" || passwordValidation(e.target.value)) {
            element.style.outline = "2px solid #e0e0e0";
          } else {
            element.style.outline = "2px solid #f34213";
          }
        });
      }
    });
  }, 500);
};