import { s as styleInject, u as useViewHandler, C as Checkout } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import 'react';
import ConfettiInSummary from './index-eb98a8c6.js';
import ArticleOverview from './index-d0331808.js';
import SummaryHeader from './index-c0a41b5b.js';
import { u as useStickyScroll } from './ussIsSticky-2f6bc37b.js';
import classnames from 'classnames';
import AiRoomsSelection from './index-290c519e.js';
import AppointmentPreview from './index-688fe1aa.js';
import { jsxs, Fragment, 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 'react-confetti-explosion';
import './index-7167c5bc.js';
import 'react-laag';
import './index-5a146745.js';
import 'react-qr-code';
import './index-c648d661.js';
import './useCustomDimensions-8be02680.js';
import './index-be7a52a8.js';
import 'swiper/react';
import 'swiper/modules';
import './index-9c4f9dc2.js';
import './index.module-613d19d3.js';
import './index-04a7a9b4.js';
import './index-23081351.js';
import '@babel/runtime/helpers/objectDestructuringEmpty';
import './index-b14a4a7c.js';
import './index-fdf81349.js';

var checkoutWrapper = "checkout-wrapper-jKxxm";
var checkoutWrapperSticky = "checkout-wrapper-sticky-dE4al";
var css_248z = ".checkout-wrapper-jKxxm {\n  padding-top: 8px;\n  padding-bottom: 8px;\n  z-index: 100;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper {\n  transition: max-height 0.4s ease;\n  max-height: 200px;\n}\n\n.checkout-wrapper-sticky-dE4al {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  padding: 8px 16px;\n  width: calc(100% - 32px);\n  transition: opacity 0.2s ease;\n  background-color: rgba(244, 244, 244, 0.8);\n}\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper {\n  flex-wrap: nowrap;\n  max-height: 60px; /* fits one row */\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button {\n  transition:\n    font-size 0.4s ease,\n    height 0.4s ease;\n  white-space: nowrap;\n  overflow: hidden; /* optional if text might overflow */\n  display: none;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button:nth-child(1),\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button:nth-child(2),\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button:nth-child(3) {\n  display: flex;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-button-wrapper button {\n  font-size: 14px;\n  height: 36px;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper {\n  width: 100%;\n  transition: width 0.4s ease;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper:not(.no-primary-buttons) {\n  grid-template-columns: repeat(auto-fit, minmax(calc(30% - 4px), 1fr)) !important;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper:not(.no-primary-buttons) {\n  width: 40%;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper:empty {\n  display: none;\n}\n\n.checkout-wrapper-sticky-dE4al .checkout-secondary-button-wrapper > button div:nth-child(2) {\n  display: none;\n}\n";
styleInject(css_248z);

var SummaryOverview = function SummaryOverview(props) {
  var _viewHandler$settings;
  var viewHandler = useViewHandler();
  var _useStickyScroll = useStickyScroll(-50, (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : null),
    stickyRef = _useStickyScroll.stickyRef,
    isSticky = _useStickyScroll.isSticky;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(ConfettiInSummary, {}), /*#__PURE__*/jsx(SummaryHeader, {}), /*#__PURE__*/jsx("div", {
      ref: stickyRef,
      className: checkoutWrapper,
      style: {
        opacity: isSticky ? '0' : '1'
      },
      children: /*#__PURE__*/jsx(Checkout, {
        viewHandler: viewHandler
      })
    }), /*#__PURE__*/jsx("div", {
      className: classnames(checkoutWrapper, checkoutWrapperSticky, 'checkout-wrapper-sticky'),
      style: {
        opacity: isSticky ? '1' : '0',
        pointerEvents: isSticky ? 'auto' : 'none'
      },
      children: /*#__PURE__*/jsx(Checkout, {
        viewHandler: viewHandler
      })
    }), viewHandler.uiState.ViewConfig.showAppointmentPreview && /*#__PURE__*/jsx(AppointmentPreview, {}), viewHandler.productState.diva3dImgSrc && /*#__PURE__*/jsx(AiRoomsSelection, {}), /*#__PURE__*/jsx(ArticleOverview, {})]
  });
};
var SummaryOverview$1 = observer(SummaryOverview);

export { SummaryOverview$1 as default };
