import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import InfoIcon from './index-04a7a9b4.js';
import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
import { observer } from 'mobx-react-lite';
import SummaryOptionTree from './index-ea5e3e90.js';
import classnames from 'classnames';
import { jsxs, jsx } from 'react/jsx-runtime';

var tabgroupWrapper = "tabgroup-wrapper-4aobO";
var mobile = "mobile-WRdEu";
var tablet = "tablet-hQxkY";
var tabgroupTitle = "tabgroup-title-1R284";
var optionWrapper = "option-wrapper-pmVYq";
var optionItem = "option-item-zmiHX";
var subItemsWrapper = "sub-items-wrapper-B8kl2";
var imageWrapper = "image-wrapper-egqGk";
var image = "image-jeC--";
var imagePlaceholder = "image-placeholder-gM-z9";
var isDefined = "is-defined-d2h6S";
var optionContent = "option-content-j3aZy";
var optionTitleWrapper = "option-title-wrapper-9zVs5";
var posNrClass = "pos-nr-class-Cbb-Q";
var big = "big-zXYUG";
var posNrWrapper = "pos-nr-wrapper-h63sR";
var optionTitle = "option-title-ErJ-u";
var optionDescription = "option-description-WL9GJ";
var optionButton = "option-button-0C2Fa";
var priceWrapper = "price-wrapper-mlLK5";
var css_248z = ".tabgroup-wrapper-4aobO {\n  display: flex;\n  flex-direction: column;\n  border-radius: calc(var(--globalBorderRadius) * 4);\n  padding: 8px;\n  margin-bottom: 10px;\n  color: var(--secondaryColor);\n  border: 1px solid rgb(230, 230, 230);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY).tabgroup-wrapper-4aobO {\n  gap: 6px;\n  padding: 6px;\n  margin-bottom: 8px;\n}\n\n.tabgroup-title-1R284 {\n  font-weight: 300;\n  font-size: 14px;\n  margin-left: 6px;\n}\n\n.option-wrapper-pmVYq {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.option-item-zmiHX {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 8px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-item-zmiHX {\n  gap: 12px;\n  padding: 6px;\n}\n\n.sub-items-wrapper-B8kl2 {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  border: 1px solid #e5e7eb;\n  border-radius: calc(var(--globalBorderRadius) * 2);\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .sub-items-wrapper-B8kl2 {\n  gap: 8px;\n}\n\n.sub-items-wrapper-B8kl2 .sub-items-wrapper-B8kl2 {\n  padding: 8px;\n  border-radius: calc(var(--globalBorderRadius));\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .sub-items-wrapper-B8kl2 .sub-items-wrapper-B8kl2 {\n  padding: 6px;\n}\n\n.sub-items-wrapper-B8kl2 .tabgroup-wrapper-4aobO {\n  margin-bottom: 0px;\n  border: 0px solid transparent;\n  padding-top: 0px;\n}\n\n.image-wrapper-egqGk {\n  width: 48px;\n  height: 48px;\n  position: relative;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .image-wrapper-egqGk {\n  width: 40px;\n  height: 40px;\n}\n\n.image-jeC-- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  border-radius: var(--globalBorderRadius);\n}\n\n.image-placeholder-gM-z9 {\n  width: 100%;\n  height: 100%;\n  background-color: #f3f4f6;\n  border-radius: var(--globalBorderRadius);\n}\n\n.is-defined-d2h6S {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 12 12%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Ccircle cx%3D%226%22 cy%3D%226%22 r%3D%226%22 fill%3D%22%2310B981%22%2F%3E  %3Cpath d%3D%22M3.5 6L5 7.5L8.5 4%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: 14px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  bottom: -5px;\n  right: -8px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .is-defined-d2h6S {\n  width: 12px;\n  height: 12px;\n  background-size: 12px;\n  bottom: -4px;\n  right: -7px;\n}\n\n.option-content-j3aZy {\n  flex: 1;\n}\n\n.option-title-wrapper-9zVs5 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 6px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-title-wrapper-9zVs5 {\n  gap: 4px;\n  margin-bottom: 4px;\n}\n\n.pos-nr-class-Cbb-Q {\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 16px;\n  border: 1px solid var(--primaryColor);\n  color: var(--secondaryColor);\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--primaryColor);\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .pos-nr-class-Cbb-Q {\n  font-size: 8px;\n  width: 12px;\n  height: 12px;\n}\n\n.pos-nr-class-Cbb-Q.big-zXYUG {\n  width: 24px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .pos-nr-class-Cbb-Q.big-zXYUG {\n  width: 20px;\n}\n\n.pos-nr-wrapper-h63sR {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .pos-nr-class-Cbb-Q {\n  gap: 2px;\n}\n\n.option-title-ErJ-u {\n  font-weight: 300;\n  font-size: 14px;\n}\n\n.option-description-WL9GJ {\n  color: #6b7280;\n  font-size: 14px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-title-ErJ-u,\n.mobile-WRdEu:not(.tablet-hQxkY) .option-description-WL9GJ {\n  font-size: 12px;\n}\n\n.option-button-0C2Fa {\n  padding: 6px;\n  border-radius: 6px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2217%22 height%3D%2218%22 viewBox%3D%220 0 17 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.043 2.6653L14.9536 1.5645C14.0535 0.654099 12.5866 0.654099 11.6856 1.5645L1.88323 11.4709C1.82148 11.5333 1.77635 11.6101 1.7526 11.6949L0.300686 16.8317C0.249228 17.0133 0.299895 17.2077 0.431311 17.3413C0.529478 17.4405 0.660103 17.4933 0.794686 17.4933C0.842186 17.4933 0.889686 17.4869 0.935603 17.4733L6.0189 16.0053C6.10281 15.9813 6.1796 15.9357 6.24135 15.8733L16.043 5.9677C16.48 5.5269 16.7199 4.9405 16.7199 4.3165C16.7199 3.6925 16.48 3.1061 16.043 2.6653ZM5.60802 15.0453L1.54123 16.2189L2.70339 12.1101L10.5971 4.1333L13.5017 7.0685L5.60802 15.0453ZM15.317 5.2341L14.2277 6.3349L11.3231 3.3997L12.4124 2.2989C12.9127 1.7933 13.7274 1.7941 14.2285 2.2989L15.3178 3.3997C15.5609 3.6445 15.6939 3.9709 15.6939 4.3173C15.6931 4.6629 15.5593 4.9885 15.317 5.2341Z%22 fill%3D%22%236F6F6F%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: 16px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n  width: 16px;\n  height: 16px;\n  transition: border 0.2s ease-in-out;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .option-button-0C2Fa {\n  padding: 4px;\n  border-radius: 4px;\n  width: 14px;\n  height: 14px;\n}\n\n.option-button-0C2Fa:hover {\n  border: 1px solid #e5e7eb;\n}\n\n.price-wrapper-mlLK5 {\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n}\n\n.mobile-WRdEu:not(.tablet-hQxkY) .price-wrapper-mlLK5 {\n  font-size: 10px;\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 OptionItem = function OptionItem(_ref) {
  var _option$summaryItems, _option$targetArticle;
  var option = _ref.option;
  var viewHandler = useViewHandler();
  var _useDivaCore = useDivaCore(),
    hidePrices = _useDivaCore.state.hidePrices;
  var subItems = Object.values((_option$summaryItems = option.summaryItems) !== null && _option$summaryItems !== void 0 ? _option$summaryItems : {});
  return /*#__PURE__*/jsxs("div", {
    className: subItemsWrapper,
    children: [/*#__PURE__*/jsxs("div", {
      className: classnames(optionItem),
      children: [/*#__PURE__*/jsxs("div", {
        className: imageWrapper,
        children: [option.image ? /*#__PURE__*/jsx("img", {
          src: option.image,
          alt: option.title,
          className: image
        }) : /*#__PURE__*/jsx("div", {
          className: imagePlaceholder
        }), option.isDefined && /*#__PURE__*/jsx("div", {
          className: isDefined
        }), (option.contentItemId || option.optionContentItemId) && /*#__PURE__*/jsx(InfoIcon, {
          style: {
            position: 'absolute',
            top: -7,
            right: -7,
            '--infoIconSize': '14px'
          },
          item: _objectSpread(_objectSpread({}, option), {}, {
            contentItemId: option.contentItemId || option.optionContentItemId
          })
        })]
      }), /*#__PURE__*/jsxs("div", {
        className: optionContent,
        children: [/*#__PURE__*/jsx("div", {
          className: optionTitleWrapper,
          children: /*#__PURE__*/jsx("div", {
            className: optionTitle,
            dangerouslySetInnerHTML: {
              __html: (option.quantity ? option.quantity + 'x ' : '') + option.title
            }
          })
        }), /*#__PURE__*/jsx("div", {
          className: optionDescription,
          dangerouslySetInnerHTML: {
            __html: option.description
          }
        }), !!option.price && !hidePrices && /*#__PURE__*/jsx("div", {
          className: priceWrapper,
          children: /*#__PURE__*/jsx("div", {
            children: DivaUtils.formatPrice(option.price, viewHandler.productState.priceFormat)
          })
        })]
      }), /*#__PURE__*/jsx("div", {
        className: posNrWrapper,
        children: !!((_option$targetArticle = option.targetArticlePosNrs) !== null && _option$targetArticle !== void 0 && _option$targetArticle.length) && !option.includesAllPosNrs && option.targetArticlePosNrs.map(function (posNr) {
          return /*#__PURE__*/jsx("div", {
            className: classnames(posNrClass, posNr.toString().length >= 2 && big),
            children: posNr
          });
        })
      }), /*#__PURE__*/jsx("button", {
        className: optionButton,
        onClick: function onClick() {
          window.lastNavigationType = 'SUMMARY_PALETTE';
          viewHandler.paletteViewHandler.clickedOnSummaryPalette(option);
        }
      })]
    }), !!subItems.length && subItems.map(function (item, index) {
      return /*#__PURE__*/jsx(SummaryOptionTree, {
        item: item
      }, index);
    })]
  });
};
var OptionItem$1 = observer(OptionItem);

var index = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': OptionItem$1
});

export { OptionItem$1 as O, tablet as a, tabgroupTitle as b, index as i, mobile as m, optionWrapper as o, tabgroupWrapper as t };
