import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useRef, useEffect } from 'react';
import SettingsHeaderContainer from './index-3bcdb4a8.js';
import classnames from 'classnames';
import TotalPrice from './index-607ce1b1.js';
import SettingsItemsWrapper from './index-e8768440.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/slicedToArray';
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';
import './index-105eab2c.js';
import 'sift';
import './index-0d3bfd91.js';
import './index-2b5bdfe1.js';
import './index-caff71dc.js';
import './index-5cb692e9.js';
import './index.module-d6f043d2.js';
import './index-04a7a9b4.js';
import './index-755074ae.js';
import '@mui/icons-material/Block';
import '@mui/icons-material/Warning';
import './index-db439036.js';
import 'react-dropdown';
import './index-7f2e9c31.js';
import './index-4b3e6bbf.js';
import './index-69271b96.js';
import './index-9a965a68.js';
import '@crystaldesign/content-box';
import './index-e9a81262.js';
import './index-2f37b9f2.js';
import './index-bea5c228.js';
import './index-014a5003.js';
import 'swiper/react';
import 'swiper/modules';
import './UnlockCard-575022e0.js';
import './index-ce21cd4d.js';
import './index-6a697eea.js';
import './index-ea5e3e90.js';
import './index-69fd5e9e.js';
import './index-079ef135.js';
import './index-4b48794b.js';
import 'react-laag';
import './index.module-25687dd9.js';
import './index-3f40a92d.js';
import './index-66fd1759.js';
import './index-8a330776.js';
import './index-4fda4c71.js';
import './index-d896efe9.js';
import './index.module-fe49e10f.js';
import './index-6051ac01.js';
import './index-ec31a7cb.js';
import './index-79fbb400.js';
import './index-2e39dac3.js';
import './index-1641324b.js';
import './index-7635bafb.js';
import './index-0e0e6ac6.js';
import './index-a1cef81d.js';
import './index-4c03ac5c.js';
import './index-10d8be2f.js';
import './index-b7364bb1.js';
import './index-a253bbbf.js';
import './index-4ca1affe.js';
import 'rc-slider';
import './index-c44088dc.js';
import './index-e4d1ba18.js';
import './index-d5bb9bda.js';
import './index-dd2aabd2.js';
import './index-eb98a8c6.js';
import 'react-confetti-explosion';
import './index-d0331808.js';
import './index-7167c5bc.js';
import './index-5a146745.js';
import 'react-qr-code';
import './index-c648d661.js';
import './useCustomDimensions-8be02680.js';
import './index-c0a41b5b.js';
import './ussIsSticky-2f6bc37b.js';
import './index-290c519e.js';
import './index-be7a52a8.js';
import './index-9c4f9dc2.js';
import './index.module-613d19d3.js';
import './index-23081351.js';
import './index-b14a4a7c.js';
import './index-fdf81349.js';
import './index-688fe1aa.js';
import './index-49b01da7.js';
import './index-f4a37353.js';

var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
var expanded = "expanded-r-uGX";
var minExpanded = "minExpanded-oyaLK";
var scrollerFlex = "scrollerFlex-XVfOS";
var scrollerContentFill = "scrollerContentFill-p1UEK";
var css_248z = ".wcConfigurator-settings-scroller-TbzP8 {\n  overflow-y: auto;\n  z-index: 100;\n  padding-right: var(--settingsScrollerPaddingRight);\n  margin-left: var(--settingsScrollerPaddingLeft);\n  padding-top: var(--settingsScrollerPaddingTopBottom);\n  padding-bottom: var(--settingsScrollerPaddingTopBottom);\n  scrollbar-gutter: stable;\n  transition: height 0.2s ease-in-out;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n\n/* When in wysiwyg inspect mode: scroller becomes flex so content can fill height */\n.scrollerFlex-XVfOS {\n  display: flex;\n  flex-direction: column;\n}\n\n.scrollerFlex-XVfOS .scrollerContentFill-p1UEK {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n";
styleInject(css_248z);

var SettingsScroller = function SettingsScroller(_ref) {
  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
  _objectDestructuringEmpty(_ref);
  var viewHandler = useViewHandler();
  var settingsScrollerElement = useRef(null);
  var itemPalettesArr = [];
  useEffect(function () {
    if (settingsScrollerElement.current) {
      viewHandler.settingsState.setScrollerElement(settingsScrollerElement.current);
      return viewHandler.uiState.setUpSettingsScrollEvent(settingsScrollerElement.current);
    }
    return function () {};
  }, [settingsScrollerElement]);
  var style = {};
  var snapPoint = viewHandler.uiState.snapPoints[viewHandler.settingsState.activeSnapPointIndex];
  var mobileHeight;
  if (isNaN(Number(snapPoint))) {
    mobileHeight = snapPoint;
  } else {
    mobileHeight = snapPoint - 38 + 'px';
  }
  if (viewHandler.uiState.isInMobileView) {
    style.height = mobileHeight;
  } else {
    var _viewHandler$settings, _viewHandler$settings2;
    style.height = 'calc(100% - ' + ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsHeaderElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) + 'px)';
  }
  for (var i = 0; i < viewHandler.settingsState.itemPaletteArr.length; i++) {
    var itemPalette = viewHandler.settingsState.itemPaletteArr[i][1];
    if (!itemPalette.isRenderedNotInSettingPalette && itemPalette.visible) itemPalettesArr.push(itemPalette);
  }
  useEffect(function () {
    if (viewHandler.uiState.configSettingsIsMinExpanded) viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MIN_CONFIG_SETTINGS');else viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MAX_CONFIG_SETTINGS');
  }, [viewHandler.uiState.configSettingsIsExpanded, viewHandler.uiState.configSettingsIsMinExpanded]);
  return /*#__PURE__*/jsxs("div", {
    style: style,
    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerFlex),
    id: "wcConfigurator-settings-scroller",
    ref: settingsScrollerElement,
    children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && !viewHandler.wysiwygDebugState.wysiwygInspectView && /*#__PURE__*/jsx(SettingsHeaderContainer, {
      isScroller: true
    }, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsxs("div", {
      className: classnames(viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerContentFill),
      children: [/*#__PURE__*/jsx(SettingsItemsWrapper, {
        itemPalettesArr: itemPalettesArr
      }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]
    })]
  });
};
var SettingsScroller$1 = observer(SettingsScroller);

export { SettingsScroller$1 as default };
