import Swiper from 'swiper';

// Lesen des 'step'-Parameters aus der URL
function getQueryParam(param) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}
// Lesen des 'step'-Parameters aus der URL
let initialSlide = getQueryParam('step') ? parseInt(getQueryParam('step')) - 1 : 0;

// Stellen Sie sicher, dass der Wert im gültigen Bereich liegt
initialSlide = Math.max(0, Math.min(initialSlide /* Maximaler Index der Slides */));

//Initialisierung des Sliders mit Optionen
/**
 * Initializes a new Swiper slider with options.
 * - initialSlide: Index of initial slide to show.
 * - allowTouchMove: Whether to allow touch dragging/swiping.
 * - simulateTouch: Enable/disable touch simulation for testing on desktop.
 * - noSwiping: Disable swiping by condition.
 * - autoHeight: Enable auto height for dynamic height slides.
 * - noSwipingClass: Class used to disable swiping on elements.
 * - pagination: Pagination configuration.
 * - on: Event handlers for slider events like init and slide change.
 */
const swiper = new Swiper('.swiper', {
  initialSlide: initialSlide,
  allowTouchMove: false,
  simulateTouch: false,
  noSwiping: true,
  autoHeight: true,
  noSwipingClass: 'swiper-slide',
  pagination: {
    el: '.swiper-pagination',
    type: 'progressbar',
  },
  on: {
    init: function () {
      updateProgressBar(this);
      updateQuestionCounter(this);
    },
    slideChange: function () {
      if (!isPopStateEvent) {
        //const currentStep = this.activeIndex + 1;
        //window.history.pushState(null, null, '?step=' + currentStep);
      }
      window.scrollTo(0, 0);
      updateProgressBar(this);
      updateQuestionCounter(this);
    },
  },
});

swiper.slides.forEach((slide) => {
  slide.setAttribute('tabindex', '-1');
});

document.addEventListener('DOMContentLoaded', (event) => {
  // Suche nach allen h1-Elementen mit der Klasse 'stelle'
  const headings = document.querySelectorAll('h1.stelle');

  headings.forEach((heading) => {
    // Extrahiere den Text '(w/m/d)'
    const match = heading.innerHTML.match(/\(w\/m\/d\)/);

    if (match) {
      // Ersetze '(w/m/d)' im Text durch ein Span-Element mit der Klasse 'text-size-tiny'
      heading.innerHTML = heading.innerHTML.replace(
        /\(w\/m\/d\)/,
        `<span class="text-size-tiny">${match[0]}</span>`
      );
    }
  });
});

//Sorgt dafür, dass man über den Broswer zurück Button ein slide zurück kann und setzt den Query Parameter
let isPopStateEvent = false;
window.addEventListener('popstate', function () {
  isPopStateEvent = true;

  let step = getQueryParam('step') ? parseInt(getQueryParam('step')) - 1 : 0;
  step = Math.max(0, Math.min(step, swiper.slides.length - 1));
  swiper.slideTo(step);

  isPopStateEvent = false;
});

function collectAndSaveQuestionsData() {
  const slides = document.querySelectorAll('[data-slide="question"]');
  const questionsData = {};

  slides.forEach((slide) => {
    const inputs = slide.querySelectorAll(
      'input[name][data-group], select[name], textarea[name], input[type="radio"][name]'
    );

    inputs.forEach((input) => {
      let value = null;
      let groupName;

      // Unterscheidung zwischen Checkboxen/Radio-Buttons und anderen Input-Typen
      if (input.type === 'checkbox' || input.type === 'radio') {
        if (input.checked) {
          const label = input.labels.length > 0 ? input.labels[0] : null;
          if (label) {
            const span = label.querySelector('.checkbox_label') || label;
            value = span ? span.textContent.trim() : label.textContent.trim();
          }
          // Verwenden des data-group Attributs, falls vorhanden, sonst des Input-Namens
          groupName = input.getAttribute('data-group') || input.name;
        }
      } else {
        // Für andere Input-Typen wie Textfelder direkt den Wert verwenden
        value = input.value.trim();
        groupName = input.name;
      }

      if (value) {
        if (!questionsData[groupName]) {
          questionsData[groupName] = [];
        }
        questionsData[groupName].push(value);
      }
    });
  });

  localStorage.setItem('questions', JSON.stringify(questionsData));
  transferDataToHiddenInput();
}

function transferDataToHiddenInput() {
  const storedData = localStorage.getItem('questions');
  if (storedData) {
    const hiddenInput = document.getElementById('answers');
    if (hiddenInput) {
      hiddenInput.value = storedData;
    }
  }
}

//Ändert den Text auf jedem Slide, je nach dem wieviele Slides vorhanden sind
function updateQuestionCounter(swiper) {
  const totalSlides = swiper.slides.length - 6; // Kontakt zählt nicht dazu
  const currentIndex = swiper.activeIndex - 2; // +1, da Index bei 0 beginnt
  const questionCounter = swiper.slides[swiper.activeIndex].querySelector('.question-counter');

  if (currentIndex === 1) {
    if (questionCounter) {
      questionCounter.textContent = `Wir haben nur ${totalSlides} Fragen an Dich`;
    }
  } else {
    if (questionCounter) {
      questionCounter.textContent = `Frage ${currentIndex} von ${totalSlides}`;
    }
  }
}

//Füllt den Tracker je nach Fortschritt des Sliders
function updateProgressBar(swiper) {
  const progressBar = document.querySelector('.track_wrapper');
  const totalSlides = swiper.slides.length - 4;
  const currentIndex = swiper.realIndex;

  // Progress Bar nur ab dem dritten Slide anzeigen
  if (currentIndex < 3) {
    progressBar.style.display = 'none';
  } else {
    progressBar.style.display = 'block';

    let progress;
    if (currentIndex === 3) {
      progress = 20; // Standardwert für den ersten Slide
    } else {
      progress = ((currentIndex - 1) / totalSlides) * 101;
    }
    document.querySelector('.track_fill').style.width = progress + '%';
  }
}

//Schaut ob ein Radio Field oder eine Checkbox valid sind
function isInputValid() {
  const currentSlide = swiper.slides[swiper.activeIndex];
  const errorMessage = currentSlide.querySelector('.error-message');

  // Überprüfen von Radio-Buttons
  const radioButtons = currentSlide.querySelectorAll('input[type="radio"]');
  if (radioButtons.length > 0 && !Array.from(radioButtons).some((radio) => radio.checked)) {
    if (errorMessage) errorMessage.style.display = 'block';
    return false;
  }

  // Überprüfen von Checkboxen
  const checkboxes = currentSlide.querySelectorAll('input[type="checkbox"]');
  if (checkboxes.length > 0 && !Array.from(checkboxes).some((checkbox) => checkbox.checked)) {
    if (errorMessage) errorMessage.style.display = 'block';
    return false;
  }

  // Überprüfen von Text-Inputs
  const textInputs = currentSlide.querySelectorAll('input[type="text"]');
  for (const input of textInputs) {
    if (input.value.trim() === '') {
      if (errorMessage) errorMessage.style.display = 'block';
      return false;
    }
  }

  // Check inputs with needed="true",
  const neededInput = currentSlide.querySelector('input[needed="true"]:checked');
  if (neededInput) {
    swiper.slideTo(swiper.slides.length - 1, 0);

    return false;
  }

  // Überprüfen des PLZ-Inputs
  const plzInput = currentSlide.querySelector('input[name="PLZ"]');
  if (plzInput && !/\d{5}/.test(plzInput.value)) {
    if (errorMessage) errorMessage.style.display = 'block';
    return false;
  }

  // Einblenden der Error Nachricht, falls kein Input ausgewählt wurde
  if (errorMessage) errorMessage.style.display = 'none';
  return true;
}

//Auswählen eines Inputs versteckt die Error Meldung wieder
document.querySelectorAll('.swiper-slide input').forEach((input) => {
  input.addEventListener('click', () => {
    const currentSlide = swiper.slides[swiper.activeIndex];
    const errorMessage = currentSlide.querySelector('.error-message');
    if (errorMessage) errorMessage.style.display = 'none';
  });
});

document.querySelectorAll('.slide-next').forEach((button) => {
  button.addEventListener('click', () => {
    if (!isInputValid()) {
    } else {
      swiper.slideNext();
      collectAndSaveQuestionsData();
      createAndFillInputs();
    }
  });
});

function createAndFillInputs() {
  const storedData = localStorage.getItem('questions');
  if (storedData) {
    const questionsData = JSON.parse(storedData);
    const contactElement = document.getElementById('contact');

    // Vorhandene Inputs entfernen, um Duplikate zu vermeiden
    contactElement.innerHTML = '';

    // Jeden Schlüssel im questionsData verarbeiten
    Object.keys(questionsData).forEach((key, index) => {
      // Ein neues Input-Element erstellen
      const input = document.createElement('input');
      input.type = 'hidden';
      input.id = `answers${index + 1}`;
      input.name = `answers${index + 1}`;

      // Daten formatieren und dem Input-Element zuweisen
      const formattedData = questionsData[key].join(', ');
      input.value = formattedData;

      // Das Input-Element zum contact-Element hinzufügen
      contactElement.appendChild(input);
    });
  } else {
    console.error('Keine Daten im localStorage unter dem Schlüssel "questions" gefunden.');
  }
}

document.querySelector('#lastbutton')?.addEventListener('click', () => {
  createAndFillInputs();
});

// Observe all accordion content elements for style changes to update Swiper height
document.querySelectorAll<HTMLElement>('.fs_accordion-1_content').forEach((accordionContent) => {
  const observerCallback = (mutations: MutationRecord[]): void => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        const computedStyle = window.getComputedStyle(accordionContent);
        if (computedStyle.display !== 'none') {
          swiper.updateAutoHeight();
        }
      }
    });
  };
  const observer = new MutationObserver(observerCallback);
  observer.observe(accordionContent, { attributes: true, attributeFilter: ['style'] });
});