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

export type NJPopoverContentProps = React.PropsWithChildren & {
  /**
   * Whether the children should be rendered inline or in a portal.
   */
  inline?: boolean;

  /**
   * Props for the FloatingFocusManager component.
   */
  focusManagerProps?: Omit<FloatingFocusManagerProps, 'context' | 'children'>;
};

export const NJPopoverContent: React.FC<NJPopoverContentProps> = (props) => {
  const { isOpen, refs, floatingStyles, context } = usePopoverContext();

  const popoverInteractionContext = usePopoverInteractionContext();

  const getFloatingProps = popoverInteractionContext?.getFloatingProps;

  const { children, inline } = props;
  const Component = React.isValidElement(children) ? Slot : 'div';
  const baseContent = (
    <Component ref={refs.setFloating} style={floatingStyles} {...getFloatingProps?.()}>
      {children}
    </Component>
  );
  const content = props.focusManagerProps ? (
    <FloatingFocusManager context={context} {...props.focusManagerProps}>
      {baseContent}
    </FloatingFocusManager>
  ) : (
    baseContent
  );

  const Parent = inline ? React.Fragment : FloatingPortal;
  return isOpen ? <Parent>{content}</Parent> : undefined;
};