import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import 'react';
import { getLogger, useTranslation, useDivaCore } from '@crystaldesign/diva-core';
import Functions from './index-76d36751.js';
import { ContentBoxComponent } from '@crystaldesign/content-box';
import { u as useCustomDimensions } from './useCustomDimensions-8be02680.js';
import { ContentItemComponent } from '@crystaldesign/content-item';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
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-f23819fe.js';

var wrapper = "wrapper-y4VmL";
var wcConfiguratorProductHeader = "wcConfiguratorProductHeader-W1oWZ";
var expanded = "expanded-rNRc-";
var functionWrapper = "functionWrapper-3sgkI";
var portrait = "portrait-Otsjq";
var landscape = "landscape-TuCY-";
var contentBoxWrapper = "content-box-wrapper-KgSZb";
var maxExpanded = "max-Expanded-4m94C";
var textbackground = "textbackground-F3b8W";
var wcPriceinfoContainer = "wcPriceinfoContainer-bH9C-";
var wcFormattedPrice = "wc-formatted-price--PHbM";
var wcFormattedBruttoPrice = "wc-formatted-brutto-price-MDFl1";
var dimensions = "dimensions-wxroF";
var rabattVisible = "rabatt-visible-vvkfB";
var tablet = "tablet-n1n5E";
var fullscreen = "fullscreen-94axf";
var sideMenuButton = "side-menu-button-NA9Lt";
var css_248z = "/* Productdaten */\n\n.wrapper-y4VmL {\n  display: flex;\n  flex-direction: row;\n  height: 70px;\n  z-index: 112;\n  transition:\n    width 0.2s ease-in-out,\n    opacity 0.5s ease-in-out;\n  opacity: 1;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.wcConfiguratorProductHeader-W1oWZ {\n  flex-basis: 50%;\n  justify-self: flex-start;\n  z-index: 300;\n  margin: 8px 0 0px 8px;\n  pointer-events: none;\n}\n\n.expanded-rNRc- .wcConfiguratorProductHeader-W1oWZ {\n  flex-basis: 100%;\n}\n.functionWrapper-3sgkI {\n  flex-basis: 50%;\n}\n\n.functionWrapper-3sgkI {\n  flex-basis: 100%;\n  position: relative;\n  z-index: 112;\n  margin: 16px;\n}\n.portrait-Otsjq .functionWrapper-3sgkI {\n  margin: 6px 12px;\n}\n\n.landscape-TuCY- .functionWrapper-3sgkI {\n  margin: 8px 12px 0px 0px;\n}\n\n.content-box-wrapper-KgSZb {\n  z-index: 112;\n}\n\n.expanded-rNRc-.wrapper-y4VmL {\n  width: calc(55% - 40px - 24px);\n}\n\n.max-Expanded-4m94C.wrapper-y4VmL,\n.settings-Foldedup-HM7JT.wrapper-y4VmL {\n  opacity: 0;\n}\n\n.wrapper-y4VmL h1 {\n  font-weight: 300;\n  font-size: 24px;\n  line-height: 27.2px;\n  letter-spacing: 0.2px;\n  color: var(--secondaryColor);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  white-space: nowrap;\n}\n.textbackground-F3b8W {\n  border-radius: 0px 0px 12px 0px;\n  padding: 0px 12px 6px 8px;\n  position: absolute;\n  width: -moz-fit-content;\n  width: fit-content;\n  white-space: nowrap;\n  left: 0px;\n}\n\n.portrait-Otsjq .textbackground-F3b8W {\n  background-color: transparent;\n}\n\n.expanded-rNRc-.wrapper-y4VmL h1 {\n  max-width: 300px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.wcPriceinfoContainer-bH9C- {\n  display: flex;\n  flex-direction: column;\n}\n\n.wcPriceinfo-Zmaer {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n\n  -webkit-text-stroke: 0.4px;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.wrapper-y4VmL h1,\n.wc-formatted-price--PHbM,\n.wc-formatted-brutto-price-MDFl1,\n.dimensions-wxroF {\n  margin: 0px;\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: -moz-fit-content;\n  width: fit-content;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.wc-formatted-price--PHbM {\n  color: var(--secondaryColor);\n  font-size: 16px;\n  font-size: var(--priceInfoFontSize, 16px);\n  -webkit-text-stroke: 0.4px;\n  font-weight: 700;\n  transition: color 0.3s ease-in-out;\n}\n.rabatt-visible-vvkfB .wc-formatted-price--PHbM {\n  color: rgb(220, 38, 38);\n}\n\n.wc-formatted-brutto-price-MDFl1 {\n  color: rgb(113, 113, 122);\n  font-size: 14px;\n  -webkit-text-stroke: 0.4px;\n  text-decoration: line-through;\n  height: 0px;\n  overflow: hidden;\n  opacity: 0;\n  transition:\n    height 0.3s ease-in-out,\n    opacity 0.3s ease-in-out;\n}\n\n.rabatt-visible-vvkfB .wc-formatted-brutto-price-MDFl1 {\n  height: 12px;\n  opacity: 1;\n}\n\n.dimensions-wxroF {\n  font-size: 16px;\n  color: var(--secondaryColor);\n  font-weight: 300;\n}\n\n.tablet-n1n5E .dimensions-wxroF {\n  font-size: 14px;\n}\n\n.portrait-Otsjq:not(.tablet-n1n5E) .dimensions-wxroF {\n  font-size: 12px;\n}\n\n.landscape-TuCY-.wrapper-y4VmL {\n  margin-left: 2rem;\n  width: calc(100% - 1rem);\n  height: 54.4px;\n}\n\n.fullscreen-94axf.landscape-TuCY-.wrapper-y4VmL {\n  left: 50px;\n  top: 0px;\n  margin-left: 0.5rem;\n  margin-top: 4px;\n  width: calc(100% - 1rem);\n  height: 24.4px;\n}\n\n.landscape-TuCY- h1 {\n  margin-top: 14px;\n  font-size: 22px;\n  line-height: 18px;\n  width: 67%;\n}\n\n.landscape-TuCY- .wcPriceinfo-Zmaer {\n  font-size: 14px;\n}\n\n.portrait-Otsjq .wc-formatted-price--PHbM {\n  font-size: 14px;\n}\n\n.portrait-Otsjq .wc-formatted-brutto-price-MDFl1 {\n  font-size: 11px;\n}\n\n.landscape-TuCY- .wc-formatted-price--PHbM {\n  font-size: 15px;\n}\n\n.portrait-Otsjq .wrapper-y4VmL {\n  height: 54.4px;\n  width: calc(100% - 4px);\n}\n\n.portrait-Otsjq h1 {\n  font-size: 15px;\n  line-height: 16px;\n}\n\n.tablet-n1n5E .wc-formatted-price--PHbM {\n  font-size: 16px;\n}\n\n.tablet-n1n5E .wc-formatted-brutto-price-MDFl1 {\n  font-size: 14px;\n}\n\n.tablet-n1n5E .wcPriceinfo-Zmaer {\n  font-size: 16px;\n}\n\n.tablet-n1n5E h1 {\n  font-size: 20px;\n  line-height: 22px;\n}\n\n.side-menu-button-NA9Lt {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z%22 fill%3D%22%234F4F4F%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z%22 fill%3D%22%234F4F4F%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: background-color 0.3s ease;\n  z-index: 1000;\n  margin: 10px 12px;\n  aspect-ratio: 1 / 1;\n}\n\n.tablet-n1n5E .side-menu-button-NA9Lt {\n  width: 22px;\n  height: 22px;\n}\n";
styleInject(css_248z);

var LOG = getLogger('Planner', 'InfoBox');
var ProductHeader = function ProductHeader(_ref) {
  var _viewHandler$productS, _viewHandler$productS2, _bbox$X, _bbox$X2, _bbox$Y, _bbox$Z, _bbox$wOLT, _bbox$dOLT, _bbox$hOLT;
  var hidePrice = _ref.hidePrice,
    productClass = _ref.productClass;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var bbox = viewHandler.settingsState.bbox;
  var _useDivaCore = useDivaCore(),
    _useDivaCore$state = _useDivaCore.state,
    hidePrices = _useDivaCore$state.hidePrices,
    isMobile = _useDivaCore$state.dimensions.isMobile,
    _useDivaCore$state$na = _useDivaCore$state.navigationConfiguration,
    enableMobile = _useDivaCore$state$na.enableMobile,
    hideHeader = _useDivaCore$state$na.hideHeader,
    openSideMenu = _useDivaCore.actions.openSideMenu;
  var showMobileNavButton = isMobile && enableMobile && !hideHeader;
  var headerContentBoxProps = viewHandler.getViewConfig().productHeaderContentBox;
  var _useCustomDimensions = useCustomDimensions(),
    dimensions$1 = _useCustomDimensions.dimensions,
    dimOnlyForOneArticle = _useCustomDimensions.dimOnlyForOneArticle;
  var hideWebConfiguratorTitle = viewHandler.getViewConfig().hideWebConfiguratorTitle || viewHandler.getViewConfig().hideWebConfiguratorTitleInMobile && viewHandler.getIsInMobileView();
  var showRabatt = viewHandler.productState.formatedBruttoPrice !== undefined && !viewHandler.getViewConfig().hideRabattPrice;
  var showMainDimensions = viewHandler.productState.doShow3DDimensionLines || viewHandler.productState.doShowGrid || viewHandler.productState.doShowMainDimensions && !isMobile;
  return /*#__PURE__*/jsxs("div", {
    className: classnames(wrapper, productClass, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, showRabatt ? rabattVisible : undefined, fullscreen),
    children: [showMobileNavButton && /*#__PURE__*/jsx("div", {
      id: "side-menu-button",
      className: sideMenuButton,
      onClick: function onClick() {
        return openSideMenu();
      }
    }), /*#__PURE__*/jsxs("div", {
      className: wcConfiguratorProductHeader,
      "data-test-id": "configProductHeader",
      children: [!hideWebConfiguratorTitle && /*#__PURE__*/jsx("h1", {
        "data-test-id": "productHeaderTitle",
        children: viewHandler.productState.webConifguratorTitle
      }), /*#__PURE__*/jsxs("div", {
        className: textbackground,
        children: [!hidePrices && !hidePrice && /*#__PURE__*/jsxs("div", {
          className: wcPriceinfoContainer,
          children: [/*#__PURE__*/jsx("span", {
            className: classnames(wcFormattedBruttoPrice),
            "data-test-id": "productHeaderFormattedBruttoPrice",
            children: /*#__PURE__*/jsx(PriceCounter, {
              price: (_viewHandler$productS = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0
            })
          }), /*#__PURE__*/jsx("span", {
            className: wcFormattedPrice,
            "data-test-id": "productHeaderFormattedPrice",
            children: /*#__PURE__*/jsx(PriceCounter, {
              price: (_viewHandler$productS2 = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0
            })
          })]
        }), showMainDimensions && /*#__PURE__*/jsxs(Fragment, {
          children: [((_bbox$X = bbox === null || bbox === void 0 ? void 0 : bbox.X) !== null && _bbox$X !== void 0 ? _bbox$X : 0) > 0 && /*#__PURE__*/jsxs("div", {
            className: dimensions,
            children: [/*#__PURE__*/jsxs("span", {
              children: [t('configurator.bth_short'), ": "]
            }), /*#__PURE__*/jsxs("span", {
              children: [(_bbox$X2 = bbox === null || bbox === void 0 ? void 0 : bbox.X) !== null && _bbox$X2 !== void 0 ? _bbox$X2 : -1, " \xD7 ", (_bbox$Y = bbox === null || bbox === void 0 ? void 0 : bbox.Y) !== null && _bbox$Y !== void 0 ? _bbox$Y : -1, " \xD7 ", (_bbox$Z = bbox === null || bbox === void 0 ? void 0 : bbox.Z) !== null && _bbox$Z !== void 0 ? _bbox$Z : -1, " cm"]
            })]
          }), (bbox === null || bbox === void 0 ? void 0 : bbox.wOLT) !== undefined && /*#__PURE__*/jsxs("div", {
            className: dimensions,
            children: [/*#__PURE__*/jsxs("span", {
              children: [t('configurator.without_olf'), ": "]
            }), /*#__PURE__*/jsxs("span", {
              children: [(_bbox$wOLT = bbox === null || bbox === void 0 ? void 0 : bbox.wOLT) !== null && _bbox$wOLT !== void 0 ? _bbox$wOLT : -1, " \xD7 ", (_bbox$dOLT = bbox === null || bbox === void 0 ? void 0 : bbox.dOLT) !== null && _bbox$dOLT !== void 0 ? _bbox$dOLT : -1, " \xD7 ", (_bbox$hOLT = bbox === null || bbox === void 0 ? void 0 : bbox.hOLT) !== null && _bbox$hOLT !== void 0 ? _bbox$hOLT : -1, " cm"]
            })]
          })]
        }), (showMainDimensions || !isMobile) && !!(dimensions$1 !== null && dimensions$1 !== void 0 && dimensions$1.length) && dimensions$1.map(function (dimension) {
          var _dimension$text, _dimension$dimension;
          return /*#__PURE__*/jsxs("div", {
            className: dimensions,
            children: [/*#__PURE__*/jsxs("span", {
              children: [(_dimension$text = dimension.text) !== null && _dimension$text !== void 0 ? _dimension$text : t('configurator.headerdimension.' + dimension.dimensionId), !dimOnlyForOneArticle && ' (' + dimension.posNrs.join(',') + ')', ":", ' ']
            }), /*#__PURE__*/jsxs("span", {
              children: [(_dimension$dimension = dimension.dimension) !== null && _dimension$dimension !== void 0 ? _dimension$dimension : 0, " ", dimension.unit]
            })]
          });
        })]
      })]
    }), /*#__PURE__*/jsx("div", {
      className: functionWrapper,
      children: /*#__PURE__*/jsx(Functions, {})
    }), !viewHandler.uiState.isInMobileView && viewHandler.productState.currentBanner && /*#__PURE__*/jsx("div", {
      className: contentBoxWrapper,
      children: /*#__PURE__*/jsx(ContentItemComponent, {
        contentItemId: viewHandler.productState.currentBanner.contentItemId,
        wrapperStyle: {
          display: 'flex',
          flexDirection: 'column',
          maxHeight: 'inherit'
        },
        onContentItemLoaded: function onContentItemLoaded(title) {
          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
            id: viewHandler.productState.currentBanner.contentItemId,
            title: title
          });
        }
      })
    }), headerContentBoxProps && !viewHandler.uiState.isInMobileView && !viewHandler.productState.currentBanner && /*#__PURE__*/jsx("div", {
      className: contentBoxWrapper,
      children: /*#__PURE__*/jsx(ContentBoxComponent, {
        settings: {
          contentBoxProps: headerContentBoxProps
        }
      })
    })]
  });
};
var ProductHeader$1 = observer(ProductHeader);

export { ProductHeader$1 as default };
