import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
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 wrapper = "wrapper-1wXYE";
var priceWrapper = "priceWrapper-oLrQ1";
var price = "price-aaYz6";
var rabattVisible = "rabattVisible-npE0I";
var brutto = "brutto-T4loO";
var title = "title-1Yq19";
var mobile = "mobile-Oy5-9";
var small = "small-2vDXh";
var percentage = "percentage--8-xl";
var css_248z = ".wrapper-1wXYE {\n  position: sticky;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-bottom: 8px;\n  white-space: nowrap;\n}\n\n.priceWrapper-oLrQ1 {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  width: 100%;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n}\n\n.price-aaYz6 {\n  font-size: 18px;\n  line-height: 18px;\n  font-size: 24px;\n  line-height: 24px;\n  color: rgba(17, 24, 39, 1);\n  font-weight: 700;\n}\n.rabattVisible-npE0I .price-aaYz6 {\n  color: rgb(220, 38, 38);\n}\n\n.brutto-T4loO {\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n  color: rgba(107, 114, 128, 1);\n  -webkit-text-decoration-line: line-through;\n          text-decoration-line: line-through;\n  display: none;\n}\n.rabattVisible-npE0I .brutto-T4loO {\n  display: block;\n}\n\n.title-1Yq19 {\n  width: auto;\n  font-weight: 500;\n  font-size: 22px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 18px;\n  float: left;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.mobile-Oy5-9 .title-1Yq19,\n.small-2vDXh .title-1Yq19 {\n  font-size: 20px;\n  line-height: 22px;\n}\n\n.percentage--8-xl {\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 16px;\n  color: #fff;\n  padding: 4px 8px;\n  border-radius: 40px;\n  background-color: rgb(220, 38, 38);\n}\n";
styleInject(css_248z);

var SummaryHeader = function SummaryHeader(props) {
  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$getViewC, _viewHandler$productS, _viewHandler$productS2;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var viewHandler = useViewHandler();
  var _useDivaCore = useDivaCore(),
    hidePrices = _useDivaCore.state.hidePrices;
  var _useState = useState(Math.round(viewHandler.productState.formatedCurSetPrice * 100 / viewHandler.productState.formatedBruttoPrice) - 100),
    _useState2 = _slicedToArray(_useState, 2),
    rabattPercentage = _useState2[0],
    setRabattPercentage = _useState2[1];
  useEffect(function () {
    var percentage = Math.round(viewHandler.productState.formatedCurSetPrice * 100 / viewHandler.productState.formatedBruttoPrice) - 100;
    if (percentage !== rabattPercentage) setRabattPercentage(percentage);
  }, [viewHandler.productState.formatedCurSetPrice, viewHandler.productState.formatedBruttoPrice]);
  var showRabatt = viewHandler.productState.formatedBruttoPrice !== undefined && !viewHandler.getViewConfig().hideRabattPrice;
  return /*#__PURE__*/jsxs("div", {
    className: classnames(wrapper, viewHandler.getIsInMobileView() ? mobile : undefined, showRabatt ? rabattVisible : undefined, ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().width) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 400) < 400 ? small : undefined),
    children: [/*#__PURE__*/jsx("div", {
      className: title,
      children: t((_viewHandler$getViewC = viewHandler.getViewConfig().summaryHeaderTitle) !== null && _viewHandler$getViewC !== void 0 ? _viewHandler$getViewC : 'configurator.summary.header.title')
    }), !hidePrices && /*#__PURE__*/jsxs("div", {
      className: priceWrapper,
      children: [/*#__PURE__*/jsx("div", {
        className: brutto,
        children: /*#__PURE__*/jsx(PriceCounter, {
          price: (_viewHandler$productS = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0,
          duration: 1.5
        })
      }), /*#__PURE__*/jsx("div", {
        className: price,
        children: /*#__PURE__*/jsx(PriceCounter, {
          price: (_viewHandler$productS2 = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0,
          duration: 1.5
        })
      }), showRabatt && /*#__PURE__*/jsx("div", {
        className: percentage,
        children: /*#__PURE__*/jsx(PriceCounter, {
          price: rabattPercentage,
          formattingFn: function formattingFn(n) {
            return n + '%';
          },
          duration: 1.5
        })
      })]
    })]
  });
};
var SummaryHeader$1 = observer(SummaryHeader);

export { SummaryHeader$1 as default };
