Line: Default

import { animate, JSAnimation, onScroll } from 'animejs';

import { Sizes } from '@/js/Sizes';
import { BREAKPOINTS } from '@/js/constants';

export interface LineOptions {
	scale: {
		mobile: {
			x: number[];
			y: number[];
		};
		desktop: {
			x: number[];
			y: number[];
		};
	};
	threshold: {
		enter: string;
		leave?: string;
	};
	sync?: boolean | string;
	desktopBreakpoint?: (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
}

export class Line {
	$element: HTMLElement;
	$container: HTMLElement;
	$inner: HTMLElement;

	options: LineOptions;
	sizes: Sizes;
	animation: JSAnimation | null = null;

	constructor($element: HTMLElement, $container: HTMLElement, options: LineOptions) {
		this.$element = $element;
		this.$container = $container;
		this.$inner = this.$element.querySelector('.supt-line__inner') as HTMLElement;
		this.options = options;
		this.sizes = new Sizes(); // Use Singleton

		this.init();

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

	init() {
		if (this.animation) {
			this.animation.cancel();
		}

		const scaleX =
			this.sizes.currentWidth >= (this.options.desktopBreakpoint ?? BREAKPOINTS.md)
				? this.options.scale.desktop.x
				: this.options.scale.mobile.x;
		const scaleY =
			this.sizes.currentWidth >= (this.options.desktopBreakpoint ?? BREAKPOINTS.md)
				? this.options.scale.desktop.y
				: this.options.scale.mobile.y;

		this.animation = animate(this.$inner, {
			scaleX,
			scaleY,
			ease: 'linear',
			autoplay: onScroll({
				container: document.body,
				target: this.$container,
				enter: this.options.threshold.enter,
				leave: this.options.threshold.leave,
				sync: this.options.sync ?? true,
			}),
		});
	}

	private handleResize(): void {
		this.init();
	}
}

export class LineGlow {
	$element: HTMLElement;
	$container: HTMLElement;
	$glow: HTMLElement;

	options: LineOptions;
	sizes: Sizes;
	animation: JSAnimation | null = null;

	constructor($element: HTMLElement, $container: HTMLElement, options: LineOptions) {
		this.$element = $element;
		this.$container = $container;
		this.$glow = this.$element.querySelector('.supt-line__glow') as HTMLElement;
		this.options = options;
		this.sizes = new Sizes(); // Use Singleton

		this.init();

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

	init() {
		if (this.animation) {
			this.animation.cancel();
		}

		const height = this.$element.offsetHeight / 1.2 + 2;
		this.$glow.style.strokeDasharray = `${height}`;

		this.animation = animate(this.$glow, {
			strokeDashoffset: [height, 0],
			ease: 'linear',
			autoplay: onScroll({
				container: document.body,
				target: this.$container,
				enter: this.options.threshold.enter,
				leave: this.options.threshold.leave,
				sync: this.options.sync ?? true,
			}),
		});
	}

	private handleResize(): void {
		this.init();
	}
}