Section Devices

import { animate } from 'animejs';
import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';

/**
 * Slider Section Timeline
 */
export class SectionDevices {
	$element: HTMLElement;
	private $prevButton: HTMLElement;
	private $nextButton: HTMLElement;
	private $sliderThumbs: HTMLElement;
	private $devices: HTMLElement[] | null;
	private previousIndex = 0;
	private sliderThumbs: Swiper | null = null;
	private newDevicesTimeout: NodeJS.Timeout | null = null;
	private devices: { device: HTMLElement; image: HTMLElement; content: HTMLElement }[] = [];
	lastSlidableIndex = 0;

	constructor($element: HTMLElement) {
		this.$element = $element;

		this.$prevButton = this.$element.querySelector(
			'.supt-section-devices__prev button'
		) as HTMLElement;
		this.$nextButton = this.$element.querySelector(
			'.supt-section-devices__next button'
		) as HTMLElement;
		this.$sliderThumbs = this.$element.querySelector(
			'.supt-section-devices__thumbs'
		) as HTMLElement;
		this.$devices = Array.from(this.$element.querySelectorAll('.supt-section-devices__device'));

		this.devices = Array.from(this.$devices).map(device => ({
			device: device,
			image: device.querySelector('.supt-section-devices__device__image') as HTMLElement,
			content: device.querySelector('.supt-section-devices__device__content') as HTMLElement,
		}));

		this.initializeSlider();
		this.initializeNavigation();

		this.resize();
		window.addEventListener('resize', this.resize.bind(this));
	}

	private initializeSlider(): void {
		if (!this.$sliderThumbs || !this.$devices) {
			return;
		}

		// Initialize Swiper
		this.sliderThumbs = new Swiper(this.$sliderThumbs, {
			modules: [Navigation],
			// navigation: {
			// 	nextEl: '.supt-section-devices__next button',
			// 	prevEl: '.supt-section-devices__prev button',
			// },
			slidesPerView: 3.3,
			// slidesPerGroup: 3,
			spaceBetween: 4,
			breakpoints: {
				768: {
					slidesPerView: 3,
					// slidesPerGroup: 5,
					spaceBetween: 6,
				},
				1024: {
					slidesPerView: 5,
					// slidesPerGroup: 5,
					spaceBetween: 6,
				},
				1440: {
					spaceBetween: 10,
					slidesPerView: 7,
					// slidesPerGroup: 7,
				},
			},
			on: {
				init: () => {
					// Initialize with first slide
					this.previousIndex = 0;
					this.updateTimelineCards(0, 'next');
					this.addSlideClickListeners();
				},
				// Update cards when slide changes
				slideChange: () => {
					if (!this.sliderThumbs) return;

					const direction = this.sliderThumbs.activeIndex > this.previousIndex ? 'next' : 'prev';
					this.updateTimelineCards(this.sliderThumbs.activeIndex, direction);
					this.previousIndex = this.sliderThumbs.activeIndex;
				},
			},
		});
	}

	private initializeNavigation(): void {
		if (!this.$prevButton || !this.$nextButton || !this.sliderThumbs) return;

		this.$prevButton.addEventListener('click', e => {
			e.preventDefault();
			if (!this.sliderThumbs) return;

			// Slide to the previous slide, if it's not slidable, update the active index in order to update the current device
			if (this.sliderThumbs.activeIndex > this.lastSlidableIndex) {
				this.setSlideActive(this.sliderThumbs.activeIndex - 1);
			} else {
				this.sliderThumbs.slidePrev();
			}
		});

		this.$nextButton.addEventListener('click', e => {
			e.preventDefault();
			if (!this.sliderThumbs) return;

			// Slide to the next slide, if it's not slidable, update the active index in order to update the current device
			if (this.sliderThumbs.activeIndex >= this.lastSlidableIndex) {
				this.setSlideActive(this.sliderThumbs.activeIndex + 1);
			} else {
				this.sliderThumbs.slideNext();
			}
		});
	}

	private updateNavigationButtonsStatus(): void {
		if (!this.$prevButton || !this.$nextButton || !this.sliderThumbs) return;

		if (this.sliderThumbs.activeIndex === 0) {
			this.$prevButton.setAttribute('disabled', 'disabled');
		} else {
			this.$prevButton.removeAttribute('disabled');
		}

		if (this.sliderThumbs.activeIndex === this.sliderThumbs.slides.length - 1) {
			this.$nextButton.setAttribute('disabled', 'disabled');
		} else {
			this.$nextButton.removeAttribute('disabled');
		}
	}

	private updateTimelineCards(index: number, direction: 'next' | 'prev'): void {
		if (!this.$devices) return;

		if (this.newDevicesTimeout) {
			clearTimeout(this.newDevicesTimeout);
		}

		// Update navigation buttons status
		this.updateNavigationButtonsStatus();

		this.devices.forEach(device => {
			device.device.classList.remove('-active');

			// Hide image + content
			animate([device.image, device.content], {
				opacity: 0,
				translateY: direction === 'next' ? '-20px' : '20px',
				duration: 300,
				easing: 'easeInQuart',
			});
		});

		const currentDevice = this.devices.filter(
			device => device.device.dataset.index === index.toString()
		)[0];

		currentDevice.device.classList.add('-active');
		this.newDevicesTimeout = setTimeout(() => {
			// Image animation
			animate(currentDevice.image, {
				opacity: [0, 1],
				translateY: direction === 'next' ? ['20px', '0px'] : ['-20px', '0px'],
				duration: 450,
				easing: 'easeOutQuart',
			});

			// Content animation slightly after images
			animate(currentDevice.content, {
				opacity: [0, 1],
				translateY: direction === 'next' ? ['24px', '0px'] : ['-24px', '0px'],
				duration: 450,
				delay: 120,
				easing: 'easeOutQuart',
			});
		}, 200);
	}

	private addSlideClickListeners(): void {
		if (!this.$sliderThumbs) return;

		const slides = this.$sliderThumbs.querySelectorAll('.swiper-slide');

		slides.forEach((slide, index) => {
			slide.addEventListener('click', () => {
				this.setSlideActive(index);
			});
		});
	}

	private setSlideActive(index: number): void {
		if (!this.sliderThumbs) return;

		// Always update the active slide, even if it's already visible
		if (this.sliderThumbs.activeIndex !== index) {
			// Force update Swiper's activeIndex and classes manually
			this.sliderThumbs.activeIndex = index;
			this.sliderThumbs.updateSlidesClasses();
		}

		// Always trigger the device update animation
		const direction = index > this.previousIndex ? 'next' : 'prev';
		this.updateTimelineCards(index, direction);
		this.previousIndex = index;
	}

	resize() {
		if (this.sliderThumbs) {
			const slidesPerView = Math.ceil(this.sliderThumbs.params.slidesPerView as number);
			this.lastSlidableIndex = this.sliderThumbs.slides.length - slidesPerView;
		}
	}
}