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

export function handleCollapseDirection(
	{ direction }: { direction?: Direction },
	close = false
) {
	switch (direction) {
		case 'right':
		case 'left':
		case 'horizontal':
			return { width: close ? 0 : 'auto' };

		case 'up':
		case 'down':
		case 'vertical':
		default:
			return { height: close ? 0 : 'auto' };
	}
}

const close: TargetResolver = (custom: { direction?: Direction }) => ({
	opacity: 0,
	...handleCollapseDirection(custom, true),
});
const open: TargetResolver = (custom: { direction?: Direction }) => ({
	opacity: 1,
	...handleCollapseDirection(custom),
});

export const variants: Variants = {
	open,
	close,
};