import { Variants } from 'framer-motion';
import { TargetResolver } from 'framer-motion/types/types';
import { DirectionAndDistance } from 'types';

export function handleSlideDirection(
	{ direction, distance = 200 }: DirectionAndDistance,
	shouldReverse: number = 1
) {
	let x = 0;
	let y = 0;
	distance *= shouldReverse;
	switch (direction) {
		case 'left':
			x = distance;
			break;
		case 'horizontal':
		case 'right':
			x = distance * -1;
			break;
		case 'up':
			y = distance;
			break;
		case 'down':
		case 'vertical':
		default:
			y = distance * -1;
			break;
	}
	return { x, y };
}

export const enter: TargetResolver = (custom: DirectionAndDistance) => ({
	opacity: 0,
	...handleSlideDirection(custom),
});
export const exit: TargetResolver = (custom: DirectionAndDistance) => ({
	opacity: 0,
	...handleSlideDirection(custom, -1),
});

export const variants: Variants = {
	animate: { opacity: 1, x: 0, y: 0 },
	enter,
	exit,
};