import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { useRef, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import CheckoutFormNew from './index-15f7d91c.js';
import ProductCenter from './index-59c6de33.js';
import ContentItemWrapper from './index-b28b0372.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/slicedToArray';
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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';
import 'react-dropdown';
import './index-81033ea4.js';
import './index-b788a35a.js';
import './index-51c25e6a.js';
import './index-10375806.js';
import './index.module-19cb4aaa.js';
import './index-0c88d91e.js';
import 'swiper/react';
import 'swiper/modules';
import './index-0980b4b8.js';
import './index-2d9c2031.js';
import '@babel/runtime/helpers/objectDestructuringEmpty';
import './index-9c4fe1ee.js';
import './index-dc78191b.js';
import './index-aa356ee3.js';
import './index-428e2823.js';
import './index-7167c5bc.js';
import 'react-laag';
import './index-5a146745.js';
import 'react-qr-code';
import './index-c648d661.js';
import './index-2da144c0.js';
import './index-7a15caf2.js';
import '@crystaldesign/content-item';

var arrow = "arrow-GTKSC";
var css_248z = ".arrow-GTKSC {\n  bottom: 40px;\n  right: 8px;\n  position: absolute;\n  width: 70px;\n  height: 55px;\n  transform: rotate(90deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 26 10%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%236f6f6f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EElement 1%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_1-2%22 data-name%3D%22Ebene 1%22%3E%3Cpath class%3D%22cls-1%22 d%3D%22M10.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M.5.5l5%2C4.29L.5%2C9.5%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M20.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  z-index: 300;\n}\n";
styleInject(css_248z);

var _excluded = ["contentItemStartPos"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Product = function Product(_ref) {
  var _viewHandler$configSt2;
  var contentItemStartPos = _ref.contentItemStartPos,
    props = _objectWithoutProperties(_ref, _excluded);
  var viewHandler = useViewHandler();
  var ref = useRef(null);
  var onClick = function onClick() {
    if (ref.current) {
      var scrollTo = ref.current.getBoundingClientRect().height;
      if (ref.current.scrollTop > 100) {
        scrollTo = 0;
      }
      ref.current.scrollTo({
        top: scrollTo,
        behavior: 'smooth'
      });
    }
  };
  var setRef = function setRef(element) {
    ref.current = element;
    viewHandler.productState.setProductElement(element);
  };
  useEffect(function () {
    var _viewHandler$configSt;
    if (!viewHandler.uiState.isLoading && (_viewHandler$configSt = viewHandler.configState.paramters) !== null && _viewHandler$configSt !== void 0 && _viewHandler$configSt.checkout) {
      onClick();
    }
  }, [(_viewHandler$configSt2 = viewHandler.configState.paramters) === null || _viewHandler$configSt2 === void 0 ? void 0 : _viewHandler$configSt2.checkout, viewHandler.uiState.isLoading]);
  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
    ref: setRef
  }, props), {}, {
    id: "wcConfigurator-product",
    children: [!viewHandler.uiState.isLoading && /*#__PURE__*/jsx("div", {
      className: arrow,
      onClick: onClick
    }), /*#__PURE__*/jsx(ProductCenter, {
      style: {
        height: 'calc(100% - 40px)',
        width: 'calc(100% - 40px)',
        top: 0,
        margin: '20px'
      }
    }), !viewHandler.uiState.isLoading && viewHandler.divaWebPlanner.getBasket() !== undefined && /*#__PURE__*/jsx(CheckoutFormNew, {}), /*#__PURE__*/jsx(ContentItemWrapper, {
      direction: contentItemStartPos
    })]
  }));
};
var Product$1 = observer(Product);

export { Product$1 as default };
