import { AnimatePresence, motion } from "framer-motion";
import { type ReactNode, useEffect } from "react";

import { useTheme } from "../../hooks/useTheme";
import { getBorderRadius } from "../../utils/getBorderRadius";
import { twMerge } from "../../utils/tailwindMerge";

export type SlideInPanelProps = {
	children: ReactNode;
	isVisible: boolean;
	closePanel: () => void;
	cardClasses?: string;
	trayClasses?: string;
};

export const SlideInPanel = ({
	children,
	isVisible,
	closePanel,
	cardClasses,
	trayClasses,
}: SlideInPanelProps) => {
	const theme = useTheme();
	const cardStyle = twMerge(
		"bn-bg-layer-1 bn-max-h-full bn-flex bn-flex-col bn-absolute bn-bottom-0 bn-left-0 bn-w-full bn-overflow-y-auto bn-border bn-border-solid bn-border-b-none bn-border-subtle",
		cardClasses,
	);

	const trayStyle = twMerge(
		"bn-backdrop-blur-md bn-absolute bn-w-full bn-h-full bn-top-0 bn-left-0 bn-border bn-border-solid bn-border-strong bn-z-10",
		trayClasses,
	);

	// @fixme: multiple effects are being called on escape
	useEffect(() => {
		const handleKeyDown = (event: { key: string }) => {
			if (event.key === "Escape") {
				closePanel();
			}
		};

		document.addEventListener("keydown", handleKeyDown);

		return () => {
			document.removeEventListener("keydown", handleKeyDown);
		};
	}, [closePanel]);

	return (
		<AnimatePresence>
			{isVisible && (
				<motion.div
					// TODO: zIndex is not working as expected (Specifically on the recipient address modal after connecting a new wallet)
					initial={{ opacity: 0, y: 50, zIndex: "auto" }}
					animate={{ opacity: 1, y: 0, zIndex: "auto" }}
					exit={{ opacity: 0, y: 50, zIndex: -1 }}
					transition={{
						duration: 0.2,
					}}
					className={trayStyle}
					style={{ borderRadius: getBorderRadius(theme.borderRadius) }}
					onClick={closePanel}
				>
					{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
					<div
						onClick={(e) => e.stopPropagation()}
						className={cardStyle}
						style={{ borderRadius: getBorderRadius(theme.borderRadius) }}
					>
						{children}
					</div>
				</motion.div>
			)}
		</AnimatePresence>
	);
};
