import { useFloating, autoUpdate, offset, flip, shift, size, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
import { Transition } from '@headlessui/react';
import { FocusScope } from '@react-aria/focus';
import { useTheme, ThemeProvider } from '@wise/components-theming';
import { clsx } from 'clsx';
import { useState } from 'react';
import { PreventScroll } from '../../../common/preventScroll/PreventScroll.mjs';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

const FLOATING_PADDING = 16;
function SelectInputPopover({
  placement,
  open,
  renderTrigger,
  title,
  size: size$1 = 'md',
  padding = 'md',
  children,
  onClose,
  onCloseEnd
}) {
  const {
    refs,
    floatingStyles,
    context
  } = useFloating({
    strategy: 'fixed',
    placement,
    middleware: [offset(8), flip({
      padding: FLOATING_PADDING,
      crossAxis: false
    }), shift(), size({
      padding: FLOATING_PADDING,
      apply: ({
        elements,
        rects,
        availableHeight
      }) => {
        elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
        elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
      }
    })],
    whileElementsMounted: autoUpdate,
    open,
    onOpenChange: value => {
      if (!value) {
        onClose?.();
      }
    }
  });
  const dismiss = useDismiss(context);
  const role = useRole(context);
  const {
    getReferenceProps,
    getFloatingProps
  } = useInteractions([role, dismiss]);
  const [floatingKey, setFloatingKey] = useState(0);
  const {
    theme,
    screenMode
  } = useTheme();
  return /*#__PURE__*/jsxs(Fragment, {
    children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger({
      ref: refs.setReference,
      getInteractionProps: getReferenceProps
    }), /*#__PURE__*/jsx(FloatingPortal, {
      children: /*#__PURE__*/jsx(ThemeProvider, {
        theme: "personal",
        screenMode: theme === 'personal' ? screenMode : 'light',
        children: /*#__PURE__*/jsx(Transition, {
          as: "div",
          show: open,
          leave: "transition-opacity",
          leaveTo: "opacity-0",
          beforeEnter: () => {
            setFloatingKey(prev => prev + 1);
          },
          afterLeave: onCloseEnd,
          children: /*#__PURE__*/jsx(FocusScope, {
            children: /*#__PURE__*/jsx(FloatingFocusManager, {
              context: context,
              children: /*#__PURE__*/jsx("div", {
                // Force inner state invalidation on open
                ref: refs.setFloating,
                className: clsx('np-popover-v2-container', {
                  'np-popover-v2-container--size-md': size$1 === 'md',
                  'np-popover-v2-container--size-lg': size$1 === 'lg'
                }),
                style: floatingStyles,
                ...getFloatingProps(),
                children: /*#__PURE__*/jsxs("div", {
                  className: clsx('np-popover-v2', title && 'np-popover-v2--has-title', {
                    'np-popover-v2--padding-md': padding === 'md'
                  }),
                  children: [title ? /*#__PURE__*/jsx("h2", {
                    className: "np-popover-v2-title np-text-title-body",
                    children: title
                  }) : null, /*#__PURE__*/jsx("div", {
                    className: "np-popover-v2-content np-text-body-default",
                    children: children
                  })]
                })
              }, floatingKey)
            })
          })
        })
      })
    })]
  });
}

export { SelectInputPopover };
//# sourceMappingURL=SelectInputPopover.mjs.map
