import { useMergeRefs } from '@floating-ui/react';
import { Slot } from '@radix-ui/react-slot';
import React, { useEffect } from 'react';
import { usePopoverContext } from '../NJPopoverContext';
import { usePopoverInteractionContext } from '../NJPopoverInteractionContext';

export type NJPopoverAnchorProps = React.PropsWithChildren & {
  onOpen?: (value: boolean) => void;
};

export const NJPopoverAnchor = React.forwardRef(
  ({ onOpen, children }: NJPopoverAnchorProps, forwardedRef: React.ForwardedRef<HTMLElement>) => {
    const { refs, isOpen } = usePopoverContext();

    useEffect(() => {
      if (onOpen) {
        onOpen(isOpen ?? false);
      }
    }, [isOpen, onOpen]);

    const popoverInteractionContext = usePopoverInteractionContext();
    const getReferenceProps = popoverInteractionContext?.getReferenceProps;
    const anchorRef = useMergeRefs([forwardedRef, refs.setReference]);

    return <Slot {...getReferenceProps?.({ ref: anchorRef })}>{children}</Slot>;
  }
);

NJPopoverAnchor.displayName = 'NJPopoverAnchor';