import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
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/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';

var container = "container-GW5iG";
var mobile = "mobile-PkDVb";
var image = "image-afs5h";
var textContainer = "textContainer-eYs6D";
var expanded = "expanded-0VaOS";
var articleName = "articleName-YT5oo";
var posNrContainer = "posNrContainer-sis0e";
var posNrHeightFitter = "posNrHeightFitter-LVv74";
var quantity = "quantity-nayMq";
var price = "price-ZyMfu";
var css_248z = ".container-GW5iG {\n  position: relative;\n  border-top: 1px solid #c6c6c6;\n  margin: 0 16px;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: row;\n}\n\n.container-GW5iG.mobile-PkDVb {\n  margin: 0;\n}\n\n.image-afs5h {\n  max-height: 5rem;\n  max-width: 30%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.textContainer-eYs6D {\n  position: relative;\n  height: 80px;\n  width: calc(70% - 80px);\n  overflow: auto;\n  margin-left: 16px;\n}\n.mobile-PkDVb .textContainer-eYs6D {\n  word-break: break-word;\n}\n.expanded-0VaOS .textContainer-eYs6D {\n  width: calc(50% - 80px);\n}\n\n.articleName-YT5oo {\n  font-weight: 300;\n}\n\n.posNrContainer-sis0e {\n  margin-left: 16px;\n  text-align: center;\n  height: 5rem;\n  width: calc(20% - 16px);\n  position: relative;\n}\n.posNrHeightFitter-LVv74 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n}\n\n.posNrContainer-sis0e span {\n  background: var(--thirdColor);\n  border-radius: var(--articlePosNrRadius);\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 1.27rem;\n  min-width: 1.27rem;\n  width: 2rem;\n  width: -moz-fit-content;\n  width: fit-content;\n  text-align: center;\n  display: inline-block;\n  padding: 0 1px;\n  -webkit-text-stroke: 0.5px;\n  margin-bottom: 0.2rem;\n}\n\n.quantity-nayMq {\n  margin-left: 16px;\n  width: calc(10% - 16px);\n  height: 5rem;\n  font-style: italic;\n  font-weight: 600;\n  text-align: center;\n  line-height: 5rem;\n}\n.price-ZyMfu {\n  margin-left: 16px;\n  width: calc(20% - 16px);\n  height: 5rem;\n  font-weight: 600;\n  line-height: 5rem;\n  text-align: center;\n  white-space: nowrap;\n}\n";
styleInject(css_248z);

var Articles = function Articles(_ref) {
  var _item$targetArticlePo;
  var itemP = _ref.item;
  var item = itemP;
  var viewHandler = useViewHandler();
  var isExpanded = viewHandler.uiState.configSettingsIsExpanded || viewHandler.uiState.configSettingsIsMaxExpanded;
  var _useDivaCore = useDivaCore(),
    isMobile = _useDivaCore.state.dimensions.isMobile;
  return /*#__PURE__*/jsxs("div", {
    className: classnames(container, isExpanded ? expanded : undefined, isMobile ? mobile : undefined),
    children: [/*#__PURE__*/jsx("img", {
      className: classnames(image),
      src: item.image
    }), /*#__PURE__*/jsxs("div", {
      className: classnames(textContainer),
      children: [/*#__PURE__*/jsx("span", {
        className: classnames(articleName),
        children: item.title
      }), item.description && /*#__PURE__*/jsx("span", {
        children: item.description
      })]
    }), isExpanded && !isMobile && /*#__PURE__*/jsx("div", {
      className: classnames(posNrContainer),
      children: /*#__PURE__*/jsx("div", {
        className: classnames(posNrHeightFitter),
        children: (_item$targetArticlePo = item.targetArticlePosNrs) === null || _item$targetArticlePo === void 0 ? void 0 : _item$targetArticlePo.map(function (posNr, key) {
          return /*#__PURE__*/jsx("span", {
            children: posNr
          }, key);
        })
      })
    }), /*#__PURE__*/jsx("div", {
      className: classnames(quantity),
      children: item.quantity + 'x'
    }), /*#__PURE__*/jsx("div", {
      className: classnames(price),
      children: DivaUtils.formatPrice(item.price, viewHandler.productState.priceFormat)
    })]
  });
};
var SummaryArticles = observer(Articles);

export { SummaryArticles as default };
