import { animate, scroll, inView } from "https://cdn.jsdelivr.net/npm/motion@11.18.2/+esm";

const OrphicMotionAnimation = {
	checkAndFixOverflow() {
		//liste des éléments à vérifier
		const elementsToCheck = ['html', 'body', '.wp-site-blocks', '.main'];

		//vérifie si l'un des éléments a un overflow hidden
		// some = si un des éléments a un overflow hidden, alors on retourne true
		const hasOverflowHidden = elementsToCheck.some(selector => {
			//si l'élément est html ou body, on récupère l'élément directement
			const getElement = () => {
				switch (selector) {
					case 'html':
						return document.documentElement;
					case 'body':
						return document.body;
					default:
						return document.querySelector(selector);
				}
			}
			const element = getElement();
			if (!element) return false;

			const style = window.getComputedStyle(element);
			return style.overflowX === 'hidden' || style.overflow === 'hidden';
		});

		//si aucun des éléments n'a un overflow hidden, alors on ajoute un overflow hidden à l'élément html
		if (!hasOverflowHidden) {
			document.documentElement.style.overflowX = 'hidden';
		}
	},

	init() {
		const elements = document.querySelectorAll('.orphic-motion-animation');
		if (elements.length > 0) {
			this.checkAndFixOverflow();
			elements.forEach(this.setupAnimation.bind(this));
		}
	},

	getAnimationConfig(element) {
		const type = element.dataset.animationType;
		const distance = parseInt(element.dataset.animationDistance) || 50;
		const duration = parseInt(element.dataset.animationDuration) || 1000;
		const delay = parseInt(element.dataset.animationDelay) || 0;

		// Configuration de base
		let initial = { opacity: 0 };
		let target = { opacity: 1 };

		// Ajout des transformations selon le type
		switch (type) {
			case 'fadeInTop':
				initial.transform = `translateY(-${distance}px)`;
				target.transform = 'translateY(0)';
				break;
			case 'fadeInBottom':
				initial.transform = `translateY(${distance}px)`;
				target.transform = 'translateY(0)';
				break;
			case 'fadeInLeft':
				initial.transform = `translateX(-${distance}px)`;
				target.transform = 'translateX(0)';
				break;
			case 'fadeInRight':
				initial.transform = `translateX(${distance}px)`;
				target.transform = 'translateX(0)';
				break;
		}

		return { initial, target, duration, delay };
	},

	setupAnimation(element) {
		const config = this.getAnimationConfig(element);
		const triggerPoint = parseInt(element.dataset.animationTrigger) || 50;
		const scrollBehavior = element.dataset.scrollBehavior || 'followScroll';

		// Set initial state
		Object.assign(element.style, {
			...config.initial,
			visibility: 'visible'
		});

		if (scrollBehavior === 'followScroll') {
			// Mode "Follow scroll" - l'animation suit le scroll
			const animation = animate(element, config.target, {
				duration: config.duration,
				delay: config.delay,
				easing: [0.25, 0.1, 0.25, 1],
				autoplay: false
			});

			scroll(animation, {
				target: element,
				offset: [`${triggerPoint}% 100%`, `${triggerPoint}% 50%`]
			});
		} else {
			// Mode "Play on view" - utilise inView pour une animation complète
			inView(element, () => {
				animate(element, {
					opacity: config.target.opacity,
					transform: config.target.transform || 'none',
				}, {
					duration: config.duration / 1000,
					delay: config.delay / 1000,
					easing: [0.25, 0.1, 0.25, 1]
				});
			}, {
				margin: `${triggerPoint}% 0px -${triggerPoint}% 0px`,
				amount: "some",
				once: true
			});
		}
	}
};

// Initialize when DOM is ready
if (window.readyState === 'loading') {
	window.addEventListener('DOMContentLoaded', () => {
		OrphicMotionAnimation.init();
	});
} else {
	OrphicMotionAnimation.init();
}
