"use strict";

document.addEventListener("DOMContentLoaded", () => {
  const handlerCounter = (event) => {
    const comment = event.target;
    const length = comment.value.length;
    const maxLength = comment.maxLength;
    const counter = document.getElementById("comment-count");

    if (length >= 50) {
      counter.innerText = `${length}/${maxLength}`;
    } else {
      counter.innerText = "";
    }
    counter.style.width = `${(length / maxLength) * 100}%`;

    if (length === maxLength) {
      counter.classList.remove("bg-warning");
      counter.classList.add("bg-danger");
    } else if (length > maxLength - 50) {
      counter.classList.remove("bg-danger");
      counter.classList.add("bg-warning");
    } else {
      counter.classList.remove("bg-warning");
      counter.classList.remove("bg-danger");
    }
  };

  const addValidation = () => {
    const comment = document.getElementById("comment");
    comment.addEventListener("input", handlerCounter);
  };

  addValidation();
});