import React, { FC, useMemo } from 'react';
import { AnimatePresence } from 'framer-motion';
import { SlideProps } from 'types';
import { Box, direction } from '../constants';
import { variants } from './variants';

/**
 * `Slide` is a more complex animation wrapper. It is performant and is intended to
 * animate `x` or `y` values.
 */

export const Slide: FC<SlideProps> = ({
	children,
	direction,
	distance,
	isVisible,
	retract,
	variants,
	...rest
}) => {
	const exit = useMemo(() => (retract ? 'enter' : 'exit'), [retract]);
	return (
		<AnimatePresence>
			{isVisible && (
				<Box
					animate="animate"
					custom={{ distance, direction }}
					exit={exit}
					initial="enter"
					variants={variants}
					{...rest}>
					{children}
				</Box>
			)}
		</AnimatePresence>
	);
};

Slide.defaultProps = {
	direction,
	distance: 200,
	isVisible: false,
	retract: false,
	variants,
};

export default Slide;