import * as PopoverPrimitive from '@radix-ui/react-popover';
import * as React from 'react';

import { getPortalContainer } from '@/lib/portal';
import { cn } from '@/lib/utils';

const Popover = PopoverPrimitive.Root;

const PopoverTrigger = PopoverPrimitive.Trigger;

const PopoverAnchor = PopoverPrimitive.Anchor;

const PopoverContent = React.forwardRef<
	React.ElementRef<typeof PopoverPrimitive.Content>,
	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>( ( { className, align = 'center', sideOffset = 4, ...props }, ref ) => (
	<PopoverPrimitive.Portal container={ getPortalContainer() }>
		<PopoverPrimitive.Content
			ref={ ref }
			align={ align }
			className={ cn(
				'z-100001 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
				className
			) }
			sideOffset={ sideOffset }
			{ ...props }
		/>
	</PopoverPrimitive.Portal>
) );
PopoverContent.displayName = PopoverPrimitive.Content.displayName;

export {
	Popover,
	PopoverTrigger,
	PopoverContent,
	PopoverAnchor,
};