Videoslider

import Swiper from 'swiper/swiper-bundle';

class Videoslider {
  /**
   *
   * @param {HTMLElement} element
   */
  constructor(element) {
    this.swiperContainer = element.querySelector('.vs-class-slider-grid-wrapper.swiper');
    this.swiperWrapper = this.swiperContainer.querySelector('.swiper-wrapper');
    this.swiperPrev = this.swiperContainer.querySelector('.vs-nav-prev');
    this.swiperNext = this.swiperContainer.querySelector('.vs-nav-next');
    this.current = 0;

    this.container = element;
    this.container.classList.add('loading');

    this.videos = [];
    this.filteredVideos = [];

    this.modal = element.querySelector('.vs-video-modal');
    this.titleEl = this.modal.querySelector('.vs-modal-title');
    this.descEl = this.modal.querySelector('.vs-modal-desc');
    this.ctaEl = this.modal.querySelector('.vs-modal-cta');
    this.videoWrapper = this.modal.querySelector('.vs-modal-video-wrapper');
    this.videoWrapperInner = this.videoWrapper.querySelector('.vs-modal-video-inner');

    this.registerModalEvents();
    this.registerFilterEvents(element);
    // Globale Referenz für Event-Delegation
    window.videoslider = this;
  }

  initialize(response) {
    response
      // eslint-disable-next-line no-shadow
      .then((response) => response.json())
      // eslint-disable-next-line no-shadow
      .then((response) => {
        this.videos = response;
        this.filteredVideos = this.videos;
        this.renderSlides(this.videos);
      })
      .catch((error) => console.error('Fehler beim Laden der JSON-Daten:', error));
  }

  renderSlides(items) {
    this.filteredVideos = items;
    this.swiperWrapper.innerHTML = '';
    items.forEach((video, index) => {
      const slide = this.createSlide(video, index);
      this.swiperWrapper.appendChild(slide);
    });
    if (!this.swiper) {
      this.swiper = new Swiper(this.swiperContainer, {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 16,
        autoHeight: true,
        loop: true,
        navigation: {
          nextEl: '.vs-nav-next',
          prevEl: '.vs-nav-prev',
        },
        breakpoints: {
          768: {
            slidesPerView: 'auto',
            centeredSlides: false,
          },
        },
      });
      this.swiper.on('click', (swiper, event) => {
        if (!event || typeof event.target?.closest !== 'function') return;

        const slide = event.target.closest('.swiper-slide');
        if (!slide || !slide.dataset.slideIndex) return;

        const index = parseInt(slide.dataset.slideIndex, 10);
        if (!Number.isNaN(index)) {
          this.openModal(index);
        }
      });
    } else {
      this.swiper.update();
    }
    this.container.classList.remove('loading');
  }

  openModal(index) {
    const video = this.filteredVideos[index];
    if (!video) return;
    this.current = index;
    this.videoWrapperInner.innerHTML = video.videocode;

    this.titleEl.innerHTML = `
        <span class="c-badge c-badge--user"><strong>HAZ+</strong></span>
        <span>${video.category?.title ?? ''}</span>
        <h2>${video.title}</h2>
      `;

    this.descEl.innerHTML = video.content;
    const link = video.resolvedLink || video.cta;
    if (link) {
      this.ctaEl.href = link;
      this.ctaEl.style.display = '';
    } else {
      this.ctaEl.style.display = 'none';
    }
    // Show modal
    this.modal.classList.remove('close');
    this.modal.classList.add('open');
    this.swiperPrev.style.display = 'none';
    this.swiperNext.style.display = 'none';
  }

  closeModal() {
    this.videoWrapperInner.innerHTML = '';
    this.modal.classList.remove('open');
    this.modal.classList.add('close');
    this.swiperPrev.style.display = 'flex';
    this.swiperNext.style.display = 'flex';
  }

  registerModalEvents() {
    const modalPrev = this.modal.querySelector('.vs-modal-prev');
    const modalNext = this.modal.querySelector('.vs-modal-next');
    const modalClose = this.modal.querySelector('.vs-close-modal');

    modalPrev.addEventListener('click', () => {
      this.closeModal();
      // eslint-disable-next-line max-len
      const prevIndex = (this.current - 1 + this.filteredVideos.length) % this.filteredVideos.length;
      this.openModal(prevIndex);
    });
    modalNext.addEventListener('click', () => {
      this.closeModal();
      const nextIndex = (this.current + 1) % this.filteredVideos.length;
      this.openModal(nextIndex);
    });
    modalClose.addEventListener('click', () => {
      this.closeModal();
    });
  }

  registerFilterEvents(element) {
    const filterBtns = element.querySelectorAll('.vs-filter-btn');
    const allButton = element.querySelector('.vs-filter-btn[data-filter="all"]');

    filterBtns.forEach((btn) => btn.addEventListener('click', () => {
      if (btn.dataset.filter === 'all') {
        filterBtns.forEach((b) => b.classList.remove('active'));
        btn.classList.add('active');
        this.renderSlides(this.videos);
        return;
      }

      btn.classList.toggle('active');
      allButton.classList.remove('active');
      const act = Array.from(filterBtns)
        .filter((b) => b.classList.contains('active') && b.dataset.filter !== 'all')
        .map((b) => b.dataset.filter);
      let slides;
      if (act.length === 0) {
        filterBtns[0].classList.add('active');
        slides = this.videos;
      } else {
        slides = this.videos.filter((video) => {
          if (!video.category || !video.category.id) return false;
          return act.includes(String(video.category.id));
        });
      }
      this.renderSlides(slides);
    }));
  }

  // eslint-disable-next-line class-methods-use-this
  createSlide(video, index) {
    const slide = document.createElement('div');
    slide.dataset.slideIndex = index;
    slide.className = 'swiper-slide vs-slide';
    slide.innerHTML = `
    <div class="vs-thumbnail vs-thumbnail-index-${index}">
      <img src="${video.resolvedThumbnail}" alt="${video.title}" style="width:100%;height:100%;object-fit:cover;">
      <span class="vs-play-icon">&#9658;</span>
      <div class="vs-thumb-overlay">
        <div class="vs-thumb-text">
          <span class="c-badge c-badge--user"><strong>HAZ+</strong></span>
          <span class="vs-category" data-id="${video.category?.id ?? ''}">${video.category?.title ?? ''}</span>
          <h2>${video.title}</h2>
        </div>
        <span>${video.shortdesc}</span>
      </div>
    </div>
  `;
    return slide;
  }
}

export default Videoslider;