import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
import { Transition, TransitionChild } from '@headlessui/react';
import { FocusScope } from '@react-aria/focus';
import { useTheme, ThemeProvider } from '@wise/components-theming';
import { clsx } from 'clsx';
import { useState, Fragment as Fragment$1 } from 'react';
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard.mjs';
import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
import { Size } from '../common/propsValues/size.mjs';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

function BottomSheet({
  open,
  renderTrigger,
  title,
  initialFocusRef,
  padding = 'md',
  children,
  onClose,
  onCloseEnd
}) {
  useVirtualKeyboard(open);
  const {
    refs,
    context
  } = useFloating({
    open,
    onOpenChange: value => {
      if (!value) {
        onClose?.();
      }
    }
  });
  const dismiss = useDismiss(context);
  const role = useRole(context);
  const {
    getReferenceProps,
    getFloatingProps
  } = useInteractions([dismiss, role]);
  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__*/jsxs(Transition, {
          as: "div",
          show: open,
          className: "np-bottom-sheet-v2-container",
          beforeEnter: () => {
            setFloatingKey(prev => prev + 1);
          },
          afterLeave: onCloseEnd,
          children: [/*#__PURE__*/jsx(TransitionChild, {
            as: "div",
            className: "np-bottom-sheet-v2-backdrop",
            enterFrom: "np-bottom-sheet-v2-backdrop--closed",
            leaveTo: "np-bottom-sheet-v2-backdrop--closed"
          }), /*#__PURE__*/jsx("div", {
            className: "np-bottom-sheet-v2",
            children: /*#__PURE__*/jsx(FocusScope, {
              children: /*#__PURE__*/jsx(FloatingFocusManager, {
                context: context,
                initialFocus: initialFocusRef,
                children: /*#__PURE__*/jsx(Fragment$1, {
                  children: /*#__PURE__*/jsxs(TransitionChild, {
                    ref: refs.setFloating,
                    as: "div",
                    className: "np-bottom-sheet-v2-content",
                    enterFrom: "np-bottom-sheet-v2-content--closed",
                    leaveTo: "np-bottom-sheet-v2-content--closed",
                    ...getFloatingProps(),
                    children: [/*#__PURE__*/jsx("div", {
                      className: "np-bottom-sheet-v2-header",
                      children: /*#__PURE__*/jsx(CloseButton, {
                        size: Size.SMALL,
                        onClick: () => {
                          onClose?.();
                        }
                      })
                    }), /*#__PURE__*/jsxs("div", {
                      className: clsx('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md'),
                      children: [title ? /*#__PURE__*/jsx("h2", {
                        className: "np-bottom-sheet-v2-title np-text-title-body",
                        children: title
                      }) : null, /*#__PURE__*/jsx("div", {
                        className: "np-bottom-sheet-v2-body np-text-body-default",
                        children: children
                      })]
                    })]
                  })
                }, floatingKey)
              })
            })
          })]
        })
      })
    })]
  });
}

export { BottomSheet };
//# sourceMappingURL=_BottomSheet.mjs.map
