"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");

    counter.innerText = `${length}/${maxLength}`;

    if (length > maxLength - 50) {
      counter.classList.remove("text-muted");
      counter.classList.add("text-danger");
    } else {
      counter.classList.remove("text-danger");
      counter.classList.add("text-muted");
    }
  };

  const handlerSize = () => {
    const scroll = window.scrollY;
    const comment = document.getElementById("comment");
    const counter = document.getElementById("comment-count");
    const commentHeight = comment.clientHeight;
    const counterHeight = counter.clientHeight;

    if (commentHeight + 0.5 * counterHeight < comment.scrollHeight) {
      comment.style.height = `${comment.scrollHeight + counterHeight}px`;
    }
  };

  const addValidation = () => {
    const comment = document.getElementById("comment");
    const counter = document.getElementById("comment-count");
    comment.style.height = `${comment.scrollHeight + counter.style.height}px`;

    comment.addEventListener("input", handlerCounter);
    comment.addEventListener("input", handlerSize);
    window.addEventListener("resize", handlerSize);
  };

  addValidation();
});