import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { useState, useRef, useEffect, useMemo } from 'react';
import { SwipeableDrawer, Box } from '@mui/material';
import { observer } from 'mobx-react-lite';
import { a as swiperWrapper } from './index.module-0226fe2f.js';
import classnames from 'classnames';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useDivaCore } from '@crystaldesign/diva-core';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/toConsumableArray';
import '@crystaldesign/diva-utils';
import 'mobx';
import '@crystaldesign/web-planner-logic';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var drawerContent = "drawer-content-JVadm";
var tabGroups = "tab-groups-5A6NV";
var swiperWrapper1 = "swiper-wrapper1-n9OSK";
var drawerHandle = "drawer-handle-QJB1W";
var drawerHandleLine = "drawer-handle-line-HgJne";
var wcConfiguratorStepsMobile = "wcConfiguratorStepsMobile-KM8rA";
var css_248z = ".drawer-content-JVadm {\n  outline: medium none invert;\n  outline: initial;\n  position: absolute;\n  z-index: 1000;\n  width: 100%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  overscroll-behavior: contain;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  transform: translateZ(0);\n  -webkit-transform: translateZ(0);\n}\n\n.diva-fullscreen .drawer-content-JVadm {\n  position: fixed;\n}\n\n/* Fix for mobile browser address bar showing/hiding */\n@supports (height: 100dvh) {\n  .drawer-content-JVadm {\n    max-height: 100dvh;\n  }\n}\n\ndiv.tab-groups-5A6NV {\n  width: 100%;\n  opacity: 1;\n  height: var(--configuratorTabGroupHeight);\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  background: initial;\n  border-radius: 0px;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  touch-action: none;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.swiper-wrapper1-n9OSK {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--settingsBackgroundColor);\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  transform: translateZ(0);\n  -webkit-transform: translateZ(0);\n}\n\n.tab-groups-5A6NV > span {\n  transform: none;\n  transform: initial;\n  left: auto;\n  left: initial;\n  top: auto;\n  top: initial;\n}\n\n.drawer-handle-QJB1W {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -32px);\n  width: 40px;\n  height: 40px;\n  touch-action: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.drawer-handle-line-HgJne {\n  width: var(--configuratorTabGroupHeight);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.wcConfiguratorStepsMobile-KM8rA {\n  position: relative;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n  display: flex;\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  overflow: hidden;\n}\n\n.overlay-w4YdQ {\n  background-color: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  opacity: 0;\n  top: -1000px;\n  height: 300vh;\n  left: -50px;\n  width: 200vw;\n\n  animation: fadeIn-0-8BB 0.3s ease-in forwards;\n  z-index: 10000;\n}\n\n.nested-drawer-content-gs440 {\n  position: absolute;\n  z-index: 10001;\n  width: 100%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overscroll-behavior: contain;\n}\n\n.nested-drawer-aQNMD {\n  display: flex;\n  flex-direction: column;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border: 0px solid #e4e4e7;\n  border-bottom: none;\n  border-top-width: 1px;\n  z-index: 2000000;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  background-color: rgba(255, 255, 255, 0.95);\n}\n\n.drawer-header-OTfW- {\n  padding: 8px 32px;\n}\n.scroll-wrapper-TzOu2 {\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 0px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 12px;\n}\n\ndiv.nested-handle-P5BWs {\n  background: transparent;\n}\n\n.nested-drawer-handle-line-IIhyo {\n  width: calc(36px);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.nested-drawer-handle-42J00 {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -10px);\n  width: 40px;\n  height: 40px;\n  touch-action: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.bottom-spacer-GC9mC {\n  min-height: 36px;\n  width: 100%;\n}\n";
styleInject(css_248z);

function useDrawerHook() {
  var viewHandler = useViewHandler();
  var _useState = useState(viewHandler.uiState.isMobilePortrait),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isDragging = _useState4[0],
    setIsDragging = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    dragStartY = _useState6[0],
    setDragStartY = _useState6[1];
  var _useState7 = useState(0),
    _useState8 = _slicedToArray(_useState7, 2),
    dragStartX = _useState8[0],
    setDragStartX = _useState8[1];
  var _useState9 = useState(0),
    _useState10 = _slicedToArray(_useState9, 2),
    dragCurrentY = _useState10[0],
    setDragCurrentY = _useState10[1];
  var _useState11 = useState(0),
    _useState12 = _slicedToArray(_useState11, 2),
    dragStartTime = _useState12[0],
    setDragStartTime = _useState12[1];
  var _useState13 = useState(false),
    _useState14 = _slicedToArray(_useState13, 2),
    isVerticalSwipe = _useState14[0],
    setIsVerticalSwipe = _useState14[1];
  var drawerRef = useRef(null);
  var _useDivaCore = useDivaCore(),
    _useDivaCore$state$di = _useDivaCore.state.dimensions,
    width = _useDivaCore$state$di.width,
    totalHeight = _useDivaCore$state$di.height;

  // Get snap points from UIState (already calculated with proper height)
  var snapPoints = viewHandler.uiState.snapPoints;
  var _useState15 = useState(function () {
      var initialSnapPoints = viewHandler.uiState.snapPoints;
      var snapIndex = viewHandler.settingsState.activeSnapPointIndex;
      var snapPoint = initialSnapPoints[snapIndex];
      return snapPoint ? "".concat(snapPoint, "px") : '50%';
    }),
    _useState16 = _slicedToArray(_useState15, 2),
    drawerHeight = _useState16[0],
    setDrawerHeight = _useState16[1];

  // Update drawer open state based on device orientation and fullscreen
  useEffect(function () {
    var forceCloseByRotation = !viewHandler.uiState.isMobilePortrait;
    var shouldOpen = !forceCloseByRotation;
    setOpen(shouldOpen);
  }, [viewHandler.uiState.isInMobileView, viewHandler.uiState.isMobileLandscape, viewHandler.uiState.isTablet, width, totalHeight]);

  // Calculate drawer height based on snap point index
  useEffect(function () {
    if (isDragging) return; // Don't update while dragging

    var snapIndex = viewHandler.settingsState.activeSnapPointIndex;
    var snapPoint = snapPoints[snapIndex];
    if (snapPoint !== undefined) {
      setDrawerHeight("".concat(snapPoint, "px"));
    }
  }, [viewHandler.settingsState.activeSnapPointIndex, isDragging, snapPoints]);

  // Find nearest snap point based on current position and velocity
  var findNearestSnapPoint = function findNearestSnapPoint(currentDrawerHeight, velocity) {
    // If swiping fast, use velocity to determine direction
    // velocity = deltaY / deltaTime, where deltaY = dragStartY - dragCurrentY
    // Positive velocity: finger moved up (dragCurrentY < dragStartY) → expand drawer
    // Negative velocity: finger moved down (dragCurrentY > dragStartY) → close drawer
    if (Math.abs(velocity) > 0.5) {
      var currentIndex = viewHandler.settingsState.activeSnapPointIndex;
      if (velocity > 0) {
        // Swiping up (expanding drawer)
        return Math.min(snapPoints.length - 1, currentIndex + 1);
      } else {
        // Swiping down (closing drawer)
        return Math.max(0, currentIndex - 1);
      }
    }

    // Otherwise, find closest snap point by comparing drawer heights
    var closestIndex = 0;
    var minDistance = Math.abs(currentDrawerHeight - snapPoints[0]);
    for (var i = 1; i < snapPoints.length; i++) {
      var distance = Math.abs(currentDrawerHeight - snapPoints[i]);
      if (distance < minDistance) {
        minDistance = distance;
        closestIndex = i;
      }
    }
    return closestIndex;
  };

  // Prevent default touch behavior to avoid page refresh on Android
  var useMove = useMemo(function () {
    return function (ev) {
      return ev.preventDefault();
    };
  }, []);

  // Handle touch start
  var handleTouchStart = function handleTouchStart(e) {
    var touch = e.touches[0];
    setDragStartY(touch.clientY);
    setDragStartX(touch.pageX);
    setDragCurrentY(touch.clientY);
    setDragStartTime(Date.now());
    setIsVerticalSwipe(false);
    setIsDragging(false);
  };

  // Handle touch move
  var handleTouchMove = function handleTouchMove(e) {
    var touch = e.touches[0];
    var currentY = touch.clientY;
    var currentX = touch.pageX;
    var deltaY = Math.abs(currentY - dragStartY);
    var deltaX = Math.abs(currentX - dragStartX);
    var threshold = 1;

    // Detect vertical swipe - only enable dragging if swipe is more vertical than horizontal
    if (!isVerticalSwipe && deltaY >= threshold && deltaY > deltaX * 2) {
      setIsVerticalSwipe(true);
      setIsDragging(true);
      // Prevent page refresh on Android when vertical swipe is detected
      window.addEventListener('touchmove', useMove, {
        passive: false
      });
    }

    // Only update height if vertical swipe is detected
    if (isVerticalSwipe && snapPoints.length > 0) {
      setDragCurrentY(currentY);

      // Calculate the new height based on drag
      var dragDeltaY = dragStartY - currentY;
      var currentSnapPoint = snapPoints[viewHandler.settingsState.activeSnapPointIndex] || snapPoints[2];
      var maxHeight = snapPoints[snapPoints.length - 1];
      var minHeight = snapPoints[0];
      var newHeight = Math.max(minHeight, Math.min(maxHeight, currentSnapPoint + dragDeltaY));
      setDrawerHeight("".concat(newHeight, "px"));
    }
  };

  // Handle touch end
  var handleTouchEnd = function handleTouchEnd() {
    // Remove the event listener
    window.removeEventListener('touchmove', useMove);
    if (!isDragging) {
      setIsVerticalSwipe(false);
      return;
    }
    var deltaY = dragStartY - dragCurrentY;
    var deltaTime = Date.now() - dragStartTime;
    var velocity = deltaTime > 0 ? deltaY / deltaTime : 0;

    // Calculate current drawer height in pixels
    var currentHeight = snapPoints[viewHandler.settingsState.activeSnapPointIndex] + deltaY;

    // Find nearest snap point
    var nearestSnapIndex = findNearestSnapPoint(currentHeight, velocity);

    // Set isDragging to false first to enable transitions
    setIsDragging(false);
    setIsVerticalSwipe(false);

    // Use requestAnimationFrame to ensure smooth transition
    requestAnimationFrame(function () {
      viewHandler.settingsState.setActiveSnapPointIndex(nearestSnapIndex);
    });
  };

  // Cleanup event listener on unmount
  useEffect(function () {
    return function () {
      window.removeEventListener('touchmove', useMove);
    };
  }, [useMove]);

  // Toggle drawer open/close
  var toggleDrawer = function toggleDrawer(newOpen) {
    setOpen(newOpen);
    if (!newOpen) {
      viewHandler.settingsState.setActiveSnapPointIndex(2);
    }
  };
  return {
    open: open,
    toggleDrawer: toggleDrawer,
    drawerHeight: drawerHeight,
    handleTouchStart: handleTouchStart,
    handleTouchMove: handleTouchMove,
    handleTouchEnd: handleTouchEnd,
    drawerRef: drawerRef,
    isDragging: isDragging
  };
}

var SettingsBottomDrawer = function SettingsBottomDrawer(_ref) {
  var draggerElement = _ref.draggerElement,
    children = _ref.children;
  var viewHandler = useViewHandler();
  var _useDrawerHook = useDrawerHook(),
    open = _useDrawerHook.open,
    toggleDrawer = _useDrawerHook.toggleDrawer,
    drawerHeight = _useDrawerHook.drawerHeight,
    handleTouchStart = _useDrawerHook.handleTouchStart,
    handleTouchMove = _useDrawerHook.handleTouchMove,
    handleTouchEnd = _useDrawerHook.handleTouchEnd,
    drawerRef = _useDrawerHook.drawerRef,
    isDragging = _useDrawerHook.isDragging;
  var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
  return /*#__PURE__*/jsxs(SwipeableDrawer, {
    anchor: "bottom",
    open: open,
    onClose: function onClose() {
      return toggleDrawer(false);
    },
    onOpen: function onOpen() {
      return toggleDrawer(true);
    },
    disableSwipeToOpen: true,
    disableBackdropTransition: !iOS,
    disableDiscovery: true,
    variant: "persistent",
    ModalProps: {
      keepMounted: true,
      disableEnforceFocus: true,
      disableAutoFocus: true
    },
    PaperProps: {
      ref: drawerRef,
      className: drawerContent,
      style: {
        height: drawerHeight,
        opacity: viewHandler.uiState.isMobileLandscape ? 0 : 1,
        position: 'absolute',
        transition: isDragging ? 'none' : 'height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)',
        willChange: isDragging ? 'height' : 'auto',
        borderTopRightRadius: 'var(--mobile-tabgroup-drawer-border-radius, 8px)',
        borderTopLeftRadius: 'var(--mobile-tabgroup-drawer-border-radius, 8px)',
        overflow: 'visible'
      },
      elevation: 0
    },
    children: [/*#__PURE__*/jsxs(Box, {
      className: classnames(tabGroups),
      onTouchStart: handleTouchStart,
      onTouchMove: handleTouchMove,
      onTouchEnd: handleTouchEnd,
      sx: {
        cursor: 'grab',
        userSelect: 'none'
      },
      children: [/*#__PURE__*/jsx("div", {
        className: drawerHandle,
        children: /*#__PURE__*/jsx("div", {
          className: drawerHandleLine
        })
      }), /*#__PURE__*/jsx("div", {
        className: wcConfiguratorStepsMobile,
        children: draggerElement
      })]
    }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
      className: classnames(swiperWrapper, swiperWrapper1),
      children: children
    })]
  });
};
var SettingsBottomDrawer$1 = observer(SettingsBottomDrawer);

export { SettingsBottomDrawer$1 as default };
