import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { useDivaCore } from '@crystaldesign/diva-core';
import { useHover, useLayer } from 'react-laag';
import MetaData from './index-7635bafb.js';
import SubTabGroup from './index-55bcb037.js';
import InfoIcon from './index-04a7a9b4.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import 'react-dynamic-multi-render';
import '@babel/runtime/helpers/objectWithoutProperties';
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-collapsible';
import './index-242e00de.js';
import './index-e8768440.js';
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-755074ae.js';
import '@mui/icons-material/Block';
import '@mui/icons-material/Warning';
import './index-db439036.js';
import 'react-dropdown';
import './index-7f2e9c31.js';
import '@babel/runtime/helpers/objectDestructuringEmpty';
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 './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-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 accItem = "AccItem-2APRQ";
var wcSize = "wcSize-dO69R";
var wcSizeNormal = "wcSize-normal-ibUrf";
var wcImage = "wcImage-LUYJr";
var wcAccInfoContainer = "wcAccInfoContainer-noQuw";
var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-QkL6Y";
var metaData = "meta-data-FNjdQ";
var wcAccSize = "wcAccSize-IgCBc";
var wcCtaContainer = "wcCTAContainer-gIkLT";
var wcAccCtaMinus = "wcAccCTAMinus-juYDC";
var wcAccCtaPlus = "wcAccCTAPlus-W-ORy";
var disable = "disable-81BEw";
var wcAccCtaQuantity = "wcAccCTAQuantity-PS2L0";
var accItemLandscape = "AccItemLandscape-bJ4ph";
var accItemPortrait = "AccItemPortrait-1gIUO";
var css_248z = "/* Accessoires*/\n\n.AccItem-2APRQ {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  white-space: pre-line;\n}\n\n.AccItem-2APRQ:hover {\n  z-index: 200;\n}\n\n.AccItem-2APRQ .wcSize-dO69R {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n}\n\n.AccItem-2APRQ .wcSize-normal-ibUrf {\n  height: 80px;\n}\n\n.AccItem-2APRQ .wcImagePlaceHolder-o65Jq {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.AccItem-2APRQ .wcSize-normal-ibUrf .wcImage-LUYJr {\n  height: 80px;\n}\n\n.AccItem-2APRQ .wcImage-LUYJr {\n  width: 80px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.wcAccInfoContainer-noQuw {\n  float: left;\n  width: calc(100% - 203.2px);\n  position: relative;\n  height: calc(100% - 12px);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.AccItem-2APRQ .wcAccInfoContainer-noQuw {\n  width: calc(100% - 181.2px);\n}\n\n.AccItem-2APRQ .wcConfigurator-settings-title-QkL6Y {\n  display: -webkit-box;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  margin-top: 8px;\n  max-width: 100%;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n}\n\n.AccItem-2APRQ .wcConfigurator-settings-title-QkL6Y.meta-data-FNjdQ {\n  -webkit-line-clamp: 1;\n}\n\n.AccItem-2APRQ .wcAccSize-IgCBc {\n  display: -webkit-box;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  width: calc(100% - 32px);\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 200;\n  position: relative;\n}\n\n@media all and (max-width: 1100px) {\n  .AccItem-2APRQ .wcSize-normal-ibUrf {\n    height: 80px;\n  }\n\n  .AccItem-2APRQ .wcSize-normal-ibUrf img {\n    height: 80px;\n  }\n}\n\n.AccItem-2APRQ .wcCTAContainer-gIkLT {\n  position: absolute;\n  bottom: 0px;\n  right: 0px;\n  width: 100px;\n  height: 32px;\n}\n\n.AccItem-2APRQ .wcCTAContainer-gIkLT {\n  font-size: 18px;\n  line-height: 20px;\n  color: var(--secondaryColor);\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC,\n.AccItem-2APRQ .wcAccCTAPlus-W-ORy {\n  font-weight: 300;\n  height: 21px;\n  width: 21px;\n  float: left;\n  background: #f2f2f2;\n  border-radius: 21px;\n  -webkit-text-stroke: 0px;\n  transition: background-color 0.15s ease;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC:hover,\n.AccItem-2APRQ .wcAccCTAPlus-W-ORy:hover {\n  background: #d9d9d9;\n  color: #424242;\n  cursor: pointer;\n}\n.AccItem-2APRQ .disable-81BEw.wcAccCTAMinus-juYDC,\n.AccItem-2APRQ .disable-81BEw.wcAccCTAPlus-W-ORy {\n  background: #f7f7f7;\n}\n.AccItem-2APRQ .disable-81BEw.wcAccCTAMinus-juYDC:hover,\n.AccItem-2APRQ .disable-81BEw.wcAccCTAPlus-W-ORy:hover {\n  background: #f7f7f7;\n  color: var(--secondaryColor);\n  cursor: inherit;\n}\n\n.AccItem-2APRQ .wcAccCTAQuantity-PS2L0 {\n  float: left;\n  width: 40px;\n  height: 16px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-text-stroke: 0.4px;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC {\n  line-height: 19px;\n}\n\n.AccItemLandscape-bJ4ph .wcCTAContainer-gIkLT {\n  font-size: 16px;\n  line-height: 30px;\n  width: 80px;\n  height: 48px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC {\n  line-height: 30px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC,\n.AccItemLandscape-bJ4ph .wcAccCTAPlus-W-ORy {\n  height: 30px;\n  width: 30px;\n  border-radius: 50%;\n}\n.AccItemLandscape-bJ4ph .wcAccInfoContainer-noQuw {\n  width: calc(100% - 192px);\n}\n\n.AccItemPortrait-1gIUO .wcCTAContainer-gIkLT {\n  font-size: 16px;\n  line-height: 30px;\n  width: 104px;\n  height: 48px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC {\n  line-height: 32px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC,\n.AccItemPortrait-1gIUO .wcAccCTAPlus-W-ORy {\n  height: 30px;\n  width: 30px;\n\n  border-radius: 50%;\n}\n.AccItemPortrait-1gIUO .wcAccInfoContainer-noQuw {\n  width: calc(100% - 192px);\n}\n";
styleInject(css_248z);

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 AccessoiresStandard = function AccessoiresStandard(_ref) {
  var _renderLayer, _item$longDescription;
  var itemP = _ref.item,
    wrapper = _ref.wrapper,
    _ref$wcAccInfoContain = _ref.wcAccInfoContainerClass,
    wcAccInfoContainerClass = _ref$wcAccInfoContain === void 0 ? wcAccInfoContainer : _ref$wcAccInfoContain,
    _ref$wcConfiguratorSe = _ref.wcConfiguratorSettingsTitleClass,
    wcConfiguratorSettingsTitleClass = _ref$wcConfiguratorSe === void 0 ? wcConfiguratorSettingsTitle : _ref$wcConfiguratorSe,
    hidePrice = _ref.hidePrice,
    hideSize = _ref.hideSize;
  var item = itemP;
  var viewHandler = useViewHandler();
  var _useDivaCore = useDivaCore(),
    _useDivaCore$state = _useDivaCore.state,
    hidePrices = _useDivaCore$state.hidePrices,
    _useDivaCore$state$di = _useDivaCore$state.dimensions,
    isMobile = _useDivaCore$state$di.isMobile,
    isTablet = _useDivaCore$state$di.isTablet;
  var isClicked = false;
  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || hidePrice;
  var onPlusClick = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var ret;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            if (!isClicked) {
              _context.next = 2;
              break;
            }
            return _context.abrupt("return");
          case 2:
            isClicked = true;
            _context.next = 5;
            return viewHandler.paletteViewHandler.clickedOnAccessoirePaletteWrapper(item, 'plus');
          case 5:
            ret = _context.sent;
            if (ret == 'AccessorieNoFreeSpace') {
              viewHandler.productState.updatePlannerMsgContainer('ACCESSOIRE_MSG', true, 'INFO', 'NO_DOCKINGPOINT_FOR_ELEMENT', true);
            }
            if (ret == 'MaxQuantityReached') {
              viewHandler.productState.updatePlannerMsgContainer('ACCESSOIRE_MSG', true, 'INFO', 'MAX_QUANTITY_REACHED', true);
            }
            isClicked = false;
          case 9:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function onPlusClick() {
      return _ref2.apply(this, arguments);
    };
  }();
  var onMinusClick = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            if (!isClicked) {
              _context2.next = 2;
              break;
            }
            return _context2.abrupt("return");
          case 2:
            isClicked = true;
            _context2.next = 5;
            return viewHandler.paletteViewHandler.clickedOnAccessoirePaletteWrapper(item, 'minus');
          case 5:
            isClicked = false;
          case 6:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
    return function onMinusClick() {
      return _ref3.apply(this, arguments);
    };
  }();
  var itemPalettesGroupedByArticles = {};
  if (item.configStepKeys) {
    var _loop = function _loop() {
      var stepKey = item.configStepKeys[i];
      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref4) {
        var _ref5 = _slicedToArray(_ref4, 2);
          _ref5[0];
          var itemPalette = _ref5[1];
        return itemPalette.configStepKey == stepKey.key;
      });
      if (!itemPalette) return 1; // continue
      if (!itemPalettesGroupedByArticles[stepKey.basketId]) itemPalettesGroupedByArticles[stepKey.basketId] = {};
      itemPalettesGroupedByArticles[stepKey.basketId][itemPalette[0]] = itemPalette[1];
    };
    for (var i = 0; i < item.configStepKeys.length; i++) {
      if (_loop()) continue;
    }
  }
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    metaDataVisible = _useState2[0],
    setMetaDataVisible = _useState2[1];

  /* tool tip stuff*/
  var triggerProps = {};
  var layerProps = {};
  var renderLayer = undefined;
  var isOver = false;
  var hoverProps = {};
  var hover = useHover({
    delayEnter: 1500,
    hideOnScroll: true
  });
  var tooltip = useLayer({
    isOpen: hover[0],
    auto: true,
    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
  });
  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
    isOver = hover[0];
    hoverProps = hover[1];
    triggerProps = tooltip.triggerProps;
    layerProps = tooltip.layerProps;
    renderLayer = tooltip.renderLayer;
  }
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
      className: classnames(accItem, wrapper, viewHandler.uiState.isMobilePortrait ? accItemPortrait : undefined, viewHandler.uiState.isMobileLandscape ? accItemLandscape : undefined)
    }, triggerProps), hoverProps), {}, {
      children: [/*#__PURE__*/jsxs("div", {
        className: classnames(wcSize, wcSizeNormal),
        children: [/*#__PURE__*/jsx("div", {
          className: classnames(wcImage),
          onClick: onPlusClick,
          style: {
            backgroundImage: "url(".concat(item.image, ")")
          }
        }), /*#__PURE__*/jsxs("div", {
          className: classnames(wcAccInfoContainerClass),
          children: [/*#__PURE__*/jsx("div", {
            className: classnames(wcConfiguratorSettingsTitleClass, metaDataVisible !== '' ? metaData : undefined),
            children: item.name
          }), /*#__PURE__*/jsx(MetaData, {
            metaData: item.metaData,
            visible: [metaDataVisible, setMetaDataVisible]
          }, item.articleCodex), !hideSize && /*#__PURE__*/jsx("div", {
            className: classnames(wcAccSize),
            children: item.formattedSize
          })]
        }), /*#__PURE__*/jsxs("div", {
          className: classnames(wcCtaContainer),
          children: [item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
            item: item,
            style: {
              left: -32,
              bottom: viewHandler.getIsInMobileView() ? 26 : 12
            }
          }, item.articleCodex), /*#__PURE__*/jsx("div", {
            onClick: onMinusClick,
            className: classnames(wcAccCtaMinus, 0 == item.actQuantity ? disable : undefined),
            children: "-"
          }), /*#__PURE__*/jsx("div", {
            className: classnames(wcAccCtaQuantity),
            children: item.actQuantity
          }), /*#__PURE__*/jsx("div", {
            onClick: onPlusClick,
            className: classnames(wcAccCtaPlus, item.maxQuantity == item.actQuantity && item.maxQuantity != 0 ? disable : undefined),
            children: "+"
          })]
        })]
      }), !pricesAreHidden && !!item.price && /*#__PURE__*/jsx(PricePreview, {
        price: item.price,
        style: {
          paddingTop: 6
        }
      })]
    })), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
      text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : item.name,
      desciption: metaDataVisible,
      codex: item.articleCodex,
      pricePreviewPromise: item.pricePreviewPromise,
      image: item.image,
      layerProps: layerProps
    }, item.articleCodex))), !!Object.keys(itemPalettesGroupedByArticles).length && /*#__PURE__*/jsx(SubTabGroup, {
      itemPalettesOfArticle: itemPalettesGroupedByArticles
    })]
  });
};
var AccessoiresStandard$1 = observer(AccessoiresStandard);

export { AccessoiresStandard$1 as default };
