'use strict';

var react = require('@floating-ui/react');
var react$1 = require('@headlessui/react');
var focus = require('@react-aria/focus');
var componentsTheming = require('@wise/components-theming');
var clsx = require('clsx');
var React = require('react');
var CloseButton = require('../../../common/closeButton/CloseButton.js');
var useVirtualKeyboard = require('../../../common/hooks/useVirtualKeyboard.js');
var PreventScroll = require('../../../common/preventScroll/PreventScroll.js');
var size = require('../../../common/propsValues/size.js');
var jsxRuntime = require('react/jsx-runtime');

function SelectInputBottomSheet({
  open,
  renderTrigger,
  title,
  initialFocusRef,
  padding = 'md',
  children,
  onClose,
  onCloseEnd
}) {
  useVirtualKeyboard.useVirtualKeyboard(open);
  const {
    refs,
    context
  } = react.useFloating({
    open,
    onOpenChange: value => {
      if (!value) {
        onClose?.();
      }
    }
  });
  const dismiss = react.useDismiss(context);
  const role = react.useRole(context);
  const {
    getReferenceProps,
    getFloatingProps
  } = react.useInteractions([dismiss, role]);
  const [floatingKey, setFloatingKey] = React.useState(0);
  const {
    theme,
    screenMode
  } = componentsTheming.useTheme();
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, renderTrigger?.({
      ref: refs.setReference,
      getInteractionProps: getReferenceProps
    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
        theme: "personal",
        screenMode: theme === 'personal' ? screenMode : 'light',
        children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
          as: "div",
          show: open,
          className: "np-bottom-sheet-v2-container",
          beforeEnter: () => {
            setFloatingKey(prev => prev + 1);
          },
          afterLeave: onCloseEnd,
          children: [/*#__PURE__*/jsxRuntime.jsx(react$1.TransitionChild, {
            as: "div",
            className: "np-bottom-sheet-v2-backdrop",
            enterFrom: "np-bottom-sheet-v2-backdrop--closed",
            leaveTo: "np-bottom-sheet-v2-backdrop--closed"
          }), /*#__PURE__*/jsxRuntime.jsx("div", {
            className: "np-bottom-sheet-v2",
            children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
              children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
                context: context,
                initialFocus: initialFocusRef,
                children: /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
                  children: /*#__PURE__*/jsxRuntime.jsxs(react$1.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__*/jsxRuntime.jsx("div", {
                      className: "np-bottom-sheet-v2-header",
                      children: /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
                        size: size.Size.SMALL,
                        onClick: () => {
                          onClose?.();
                        }
                      })
                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                      className: clsx.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__*/jsxRuntime.jsx("h2", {
                        className: "np-bottom-sheet-v2-title np-text-title-body",
                        children: title
                      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
                        className: "np-bottom-sheet-v2-body np-text-body-default",
                        children: children
                      })]
                    })]
                  })
                }, floatingKey)
              })
            })
          })]
        })
      })
    })]
  });
}

exports.SelectInputBottomSheet = SelectInputBottomSheet;
//# sourceMappingURL=SelectInputBottomSheet.js.map
