document.addEventListener("DOMContentLoaded", () => {
  const mulitstepContainer = document.querySelector(
    '[kxm-multistep="container"]',
  );
  const mulitStepfortschritt = mulitstepContainer.querySelector(
    '[kxm-multistep="fortschritt"]',
  );
  const mlPostiveBtn = mulitstepContainer.querySelector(
    '[kxm-multistep="positive"]',
  );
  const mlNegativeBtn = mulitstepContainer.querySelector(
    '[kxm-multistep="negative"]',
  );
  const btnTextPositive = mulitstepContainer.querySelector(
    '[kxm-multistep="btntext"]',
  );
  const btnTextNegative = mulitstepContainer.querySelector(
    '[kxm-multistep="btntext-negative"]',
  );
  const customSendbtn = mulitstepContainer.querySelector("[custom-sendbtn]");

  const steps = Array.from(
    mulitstepContainer.querySelectorAll('[kxm-multistep="pages"]'),
  );
  const stepWidth = 100 / steps.length;
  let fortschritt = stepWidth;

  function updateSteps() {
    steps.forEach((el) => {
      el.style.display = el.hasAttribute("is-active") ? "flex" : "none";
    });
    gsap.to(mulitStepfortschritt, { width: `${fortschritt}%`, duration: 0.3 });
  }

  function nextStep() {
    const currentIndex = steps.findIndex((el) => el.hasAttribute("is-active"));

    if (currentIndex < steps.length - 1) {
      steps[currentIndex].removeAttribute("is-active");
      steps[currentIndex + 1].setAttribute("is-active", "true");
      fortschritt += stepWidth;
    }

    const newIndex = currentIndex + 1;
    if (newIndex === steps.length - 1) {
      btnTextPositive.textContent = "Absenden";
    } else {
      btnTextPositive.textContent = "Weiter";
    }

    mlNegativeBtn.style.opacity = 1;
    mlNegativeBtn.style.pointerEvents = "auto";
    btnTextNegative.textContent = "Zurück";
  }

  function prevStep() {
    const currentIndex = steps.findIndex((el) => el.hasAttribute("is-active"));

    if (currentIndex > 0) {
      steps[currentIndex].removeAttribute("is-active");
      steps[currentIndex - 1].setAttribute("is-active", "true");
      fortschritt -= stepWidth;
    }

    const newIndex = currentIndex - 1;
    if (newIndex === 0) {
      mlNegativeBtn.style.opacity = 0;
      mlNegativeBtn.style.pointerEvents = "none";
    }

    btnTextPositive.textContent = "Weiter";
  }

  mlPostiveBtn.addEventListener("click", () => {
    const currentIndex = steps.findIndex((el) => el.hasAttribute("is-active"));

    if (currentIndex === steps.length - 1) {
      customSendbtn.click();
      return;
    }

    nextStep();
    updateSteps();
  });

  mlNegativeBtn.addEventListener("click", () => {
    prevStep();
    updateSteps();
  });

  mlNegativeBtn.style.opacity = 0;
  mlNegativeBtn.style.pointerEvents = "none";
  updateSteps();
});