Chapters Nav

import { Sizes } from '@/js/Sizes';
import { animate } from 'animejs';

const ANIMATION_DURATION = 500;
const STRETCHED_NUMBER_WIDTH = [0, 24, 26, 27];

export class ChaptersNav {
	$element: HTMLElement;
	$progressBar: HTMLElement;
	$links: NodeListOf<HTMLElement>;
	$titles: NodeListOf<HTMLElement>;
	$inner: HTMLElement;
	currentSectionIndex: number = 0;
	observer: IntersectionObserver | null = null;
	sizes: Sizes;
	private scrollHandler: (() => void) | null = null;

	constructor($element: HTMLElement) {
		this.$element = $element;
		this.$progressBar = $element.querySelector('.supt-chapters-nav__progress__bar') as HTMLElement;
		this.$links = $element.querySelectorAll('.supt-chapters-nav__link');
		this.$titles = $element.querySelectorAll('.supt-chapters-nav__link__title');
		this.$inner = $element.querySelector('.supt-chapters-nav__inner') as HTMLElement;

		this.sizes = new Sizes();

		this.init();
	}

	private init(): void {
		this.setupIntersectionObserver();
		this.setupScrollHandler();

		// Ensure first link is active by default
		if (this.$links.length > 0) {
			this.$links[0].classList.add('-is-active');
		}

		// Set initial state for titles
		this.updateTitlesVisibility();

		// Set initial progress bar position
		this.updateProgressBar({ duration: 0 });
	}

	private setupIntersectionObserver(): void {
		// Find all sections on the page that correspond to chapters
		const sections = this.findChapterSections();

		if (sections.length === 0) return;

		// Configure intersection observer options
		const options: IntersectionObserverInit = {
			root: null, // Use viewport as root
			rootMargin: '-20% 0px -20% 0px', // Trigger when element is in center 60% of viewport
			threshold: 0, // Trigger as soon as any part enters the center area
		};

		// Create intersection observer
		this.observer = new IntersectionObserver(entries => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					// Get the section index from data attribute or class
					const sectionElement = entry.target as HTMLElement;
					const sectionIndex = this.getSectionIndex(sectionElement);

					if (sectionIndex !== -1 && sectionIndex !== this.currentSectionIndex) {
						this.currentSectionIndex = sectionIndex;
						this.updateTitlesVisibility();

						this.updateProgressBar();

						// Auto-scroll to the active link
						this.scrollToActiveLink();
					}
				}
			});
		}, options);

		// Start observing all section elements
		sections.forEach(section => {
			this.observer?.observe(section);
		});
	}

	private findChapterSections(): HTMLElement[] {
		// Look for sections that might correspond to chapters
		// This could be sections with specific classes or data attributes
		const possibleSelectors = ['section[id]'];

		for (const selector of possibleSelectors) {
			const sections = document.querySelectorAll<HTMLElement>(selector);
			if (sections.length > 0) {
				return Array.from(sections);
			}
		}

		// Fallback: look for any section elements
		return Array.from(document.querySelectorAll<HTMLElement>('section'));
	}

	// Get Section Index from ID
	private getSectionIndex(sectionElement: HTMLElement): number {
		// Try to get from id
		const id = sectionElement.id;
		if (id) {
			// Extract the first number from the ID
			const match = id.match(/(\d+)/);
			if (match) {
				// Convert to 0-based index (subtract 1)
				return parseInt(match[1], 10) - 1;
			}
		}

		// Fallback: find position among all sections
		const allSections = this.findChapterSections();
		return allSections.indexOf(sectionElement);
	}

	private setupScrollHandler(): void {
		// Only add scroll handler on mobile where horizontal scrolling is enabled
		if (!this.sizes.isDesktop) {
			this.scrollHandler = () => {
				this.updateProgressBar({ duration: 0 });
			};
			this.$inner.addEventListener('scroll', this.scrollHandler);
		}
	}

	private getProgressBarSizes(sectionIndex: number): { markerLeft: number; markerWidth: number } {
		const $activeLink = this.$links[sectionIndex];
		if (!$activeLink) return { markerLeft: 0, markerWidth: 0 };

		const linkWidth = parseInt($activeLink.dataset.width || '0');

		// Calculate the position of the marker relative to the container
		let markerLeft = this.sizes.isDesktop
			? STRETCHED_NUMBER_WIDTH[sectionIndex] * sectionIndex
			: $activeLink.getBoundingClientRect().left;
		let markerWidth = linkWidth;

		if (!this.sizes.isDesktop) {
			// Handle the left padding of the nav on mobile
			if (this.currentSectionIndex == 0) {
				markerLeft -= 10;
				markerWidth += 10;
			} else if (this.currentSectionIndex == this.$links.length - 1) {
				markerWidth += 10;
			}
		}

		return {
			markerLeft,
			markerWidth,
		};
	}

	private updateProgressBar({ duration = 200 }: { duration?: number } = {}): void {
		const { markerLeft, markerWidth } = this.getProgressBarSizes(this.currentSectionIndex);

		// Animate the marker to the current link position
		animate(this.$progressBar, {
			x: markerLeft,
			scaleX: markerWidth,
			duration,
		});
	}

	private updateTitlesVisibility(): void {
		if (this.sizes.isDesktop) {
			// Update current section title only on desktop
			this.$titles.forEach((title, index) => {
				if (index === this.currentSectionIndex) {
					// Show current section title
					animate(title, {
						maxWidth: `${this.$links[index].dataset.width}px`,
						opacity: [title.style.opacity || '0', 1],
						duration: ANIMATION_DURATION,
					});
				} else {
					// Hide other section titles
					animate(title, {
						maxWidth: '0px',
						opacity: [title.style.opacity || '1', 0],
						duration: ANIMATION_DURATION,
					});
				}
			});
		}

		// Update active state of links
		this.$links.forEach((link, index) => {
			if (index === this.currentSectionIndex) {
				link.classList.add('-is-active');
			} else {
				link.classList.remove('-is-active');
			}
		});
	}

	private scrollToActiveLink(): void {
		if (this.sizes.isDesktop) return; // Only scroll on mobile

		const $activeLink = this.$links[this.currentSectionIndex];
		if (!$activeLink) return;

		$activeLink.scrollIntoView({
			behavior: 'smooth',
			block: 'center',
		});
	}

	destroy(): void {
		if (this.observer) {
			this.observer.disconnect();
			this.observer = null;
		}

		// Remove scroll event listener
		if (this.scrollHandler && !this.sizes.isDesktop) {
			this.$inner.removeEventListener('scroll', this.scrollHandler);
			this.scrollHandler = null;
		}
	}
}