(function(){
  let i = 0;
  let intro = "Hi! I'm Yassine.";
  let vocationsList = [
      " a solutions architect at Axes.Ai",
      " a software developer",
      " a hacker",
      " a maker",
      " a designer",
      " a guitarist",
      " a reader",
      " a horse rider",
      " a skydiver"
  ];
  let skillsList = ["Python", "Java", "TypeScript", "C++", "C", "PowerShell", "Bash", "SQL", "NoSQL", "Docker"];
  let speed = 48;
  let deleteSpeed = 15;
  let delayBetweenSkills = 1500;
  let symbol = "<span class='caret' style='margin-left: -.625rem;'>|</span>";

  const typeWriter = (text, elementId, isDeleting, callback, prefix = "", keepCaret = true) => {
      let element = document.getElementById(elementId);
      if (!isDeleting) {
          if (i <= text.length) {
              element.innerHTML = prefix + text.slice(0, i) + symbol;
              i++;
              setTimeout(() => typeWriter(text, elementId, isDeleting, callback, prefix, keepCaret), speed);
          } else {
              element.innerHTML = keepCaret ? prefix + text + symbol : prefix + text;
              i = 0;
              setTimeout(callback, delayBetweenSkills);
          }
      } else {
          if (i > 0) {
              element.innerHTML = prefix + text.slice(0, i) + symbol;
              i--;
              setTimeout(() => typeWriter(text, elementId, isDeleting, callback, prefix, keepCaret), deleteSpeed);
          } else {
              element.innerHTML = keepCaret ? prefix + symbol : prefix;
              i = 0;
              setTimeout(callback, delayBetweenSkills);
          }
      }
  };

  const cycleText = (items, elementId, prefix = "", index = 0) => {
      typeWriter(items[index], elementId, false, () => {
          i = items[index].length;
          typeWriter(items[index], elementId, true, () => {
              index = (index + 1) % items.length;
              cycleText(items, elementId, prefix, index);
          }, prefix);
      }, prefix);
  };

  const showContactButton = (callback) => {
      const contactButtons = document.querySelectorAll(".contact-button");
      for (const button of contactButtons) {
          button.classList.add("fade-in");
      }
      if (callback) callback();
  };

  const showFooter = () => {
      const footer = document.querySelector('footer');
      footer.style.visibility = "visible";
      footer.classList.add("fade-in");
  };

  const startTyping = () => {
      typeWriter(intro, "introText", false, () => {
        const element = document.getElementById("introContainer");
        element.classList.add("fadeOut");
        setTimeout(() => {
          cycleText(vocationsList, "animatedText", "I'm");
          // cycleText(skillsList, "skillsContainer", "");
          showContactButton(showFooter);

          setTimeout(() => {
            element.classList.add("reverse");
          }, speed*10);

        }, speed*20);
      }, "", false);
  };

  const showContactForm = () => {
    const content = document.querySelector("#content");
    const formContainer = document.querySelector("#formContainer");
    const contactForm = document.querySelector("#contactForm");
    content.classList.add("slide-up");
    formContainer.classList.add("show");
    contactForm.classList.add("show");
    showNextField(0);
  }

  const showNextField = (currentIndex) => {
    const fields = document.querySelectorAll(".form-field");
    if (currentIndex > 0) {
      fields[currentIndex - 1].classList.add("hidden");
    }
    if (currentIndex < fields.length) {
      fields[currentIndex].classList.remove("hidden");
      fields[currentIndex].classList.add("visible");
      fields[currentIndex].querySelector("input, textarea").focus();
    }
  }

  const handleFieldInput = (event) => {
    const currentField = event.target.parentElement;
    const nextIndex = Array.prototype.indexOf.call(currentField.parentElement.children, currentField) + 1;
    showNextField(nextIndex);
  }

  window.onload = function() {
    startTyping();
    const button = document.querySelector(".contact-button");
    button.addEventListener("click", showContactForm);
    const inputs = document.querySelectorAll(".form-field input, .form-field textarea");
    inputs.forEach(input => {
      input.addEventListener("keydown", (event) => {
        if (event.key === "Enter") {
          event.preventDefault();
          handleFieldInput(event);
        }
      });
    });
  };

})();