import { s as styleInject, u as useViewHandler, P as PricePreview } from './index-bbdfb97a.js';
import 'react';
import classnames from 'classnames';
import Option from './index-d2a26c62.js';
import { useTranslation } from '@crystaldesign/diva-core';
import InfoIcon from './index-04a7a9b4.js';
import ReverseCheck from './index-755074ae.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import 'mobx-react-lite';
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.module-fe49e10f.js';
import './index.module-25687dd9.js';
import './index-3f40a92d.js';
import 'react-laag';
import './index-7635bafb.js';
import '@mui/icons-material/Block';
import '@mui/icons-material/Warning';

var container = "container-GW-AX";
var sel = "sel-jrQj2";
var titleContainer = "title-container-W41FT";
var title = "title-FojkZ";
var subTitle = "sub-title-RJrKO";
var ccConstructionWarning = "ccConstructionWarning-8h9KH";
var css_248z = ".container-GW-AX {\n  position: relative;\n  box-sizing: border-box;\n  border: 2px solid #e8e9ed;\n  border-radius: 6px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.container-GW-AX.sel-jrQj2 {\n  border: 2px solid var(--secondaryColor);\n}\n\n.container-GW-AX img {\n  width: 100%;\n\n  -o-object-fit: contain;\n\n     object-fit: contain;\n}\n\n.title-container-W41FT {\n  height: 30px;\n  color: #4b4b4b;\n  background: #f2f2f2;\n}\n.title-FojkZ,\n.sub-title-RJrKO {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 1.2em;\n  text-align: right;\n  margin: 0 3px;\n}\n\n.title-FojkZ {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 15px;\n}\n\n.sub-title-RJrKO {\n  -webkit-line-clamp: 1;\n  white-space: nowrap;\n  font-size: 9px;\n  line-height: 12px;\n  font-weight: 300;\n}\n\n.ccConstructionWarning-8h9KH {\n  display: block;\n  height: 30px;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 64 64%22%3E%3Cdefs%3E%3ClinearGradient gradientTransform%3D%22matrix(1.31117 0 0 1.30239 737.39 159.91)%22 gradientUnits%3D%22userSpaceOnUse%22 id%3D%220%22 y2%3D%22-.599%22 x2%3D%220%22 y1%3D%2245.47%22%3E%3Cstop stop-color%3D%22%23ffc515%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%23ffd55b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg transform%3D%22matrix(.85714 0 0 .85714-627.02-130.8)%22%3E%3Cpath d%3D%22m797.94 212.01l-25.607-48c-.736-1.333-2.068-2.074-3.551-2.074-1.483 0-2.822.889-3.569 2.222l-25.417 48c-.598 1.185-.605 2.815.132 4 .737 1.185 1.921 1.778 3.404 1.778h51.02c1.483 0 2.821-.741 3.42-1.926.747-1.185.753-2.667.165-4%22 fill%3D%22url(%230)%22%2F%3E%3Cpath d%3D%22m-26.309 18.07c-1.18 0-2.135.968-2.135 2.129v12.82c0 1.176.948 2.129 2.135 2.129 1.183 0 2.135-.968 2.135-2.129v-12.82c0-1.176-.946-2.129-2.135-2.129zm0 21.348c-1.18 0-2.135.954-2.135 2.135 0 1.18.954 2.135 2.135 2.135 1.181 0 2.135-.954 2.135-2.135 0-1.18-.952-2.135-2.135-2.135z%22 transform%3D%22matrix(1.05196 0 0 1.05196 796.53 161.87)%22 fill%3D%22%23000%22 stroke%3D%22%2340330d%22 fill-opacity%3D%22.75%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  width: 30px;\n  background-repeat: no-repeat;\n  background-size: contain;\n  padding: 0;\n  position: absolute;\n  z-index: 888;\n  top: 0;\n  right: 0;\n}\n";
styleInject(css_248z);

var OptionJungle = function OptionJungle(_ref) {
  var _item$text, _item$text2;
  var itemP = _ref.item,
    paletteId = _ref.paletteId;
    _ref.type;
  var item = itemP;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  if (item.layout == 'TEXT' || !viewHandler.uiState.isInMobileView) return /*#__PURE__*/jsx(Option, {
    item: item,
    paletteId: paletteId
  });
  var header = (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.split(/,(.+)/)[0];
  var subText = (_item$text2 = item.text) === null || _item$text2 === void 0 ? void 0 : _item$text2.split(/,(.+)/)[1];
  if (!subText) {
    var _item$text3, _item$text4;
    header = (_item$text3 = item.text) === null || _item$text3 === void 0 ? void 0 : _item$text3.split(/\((.+)/)[0];
    subText = (_item$text4 = item.text) === null || _item$text4 === void 0 || (_item$text4 = _item$text4.split(/\((.+)/)[1]) === null || _item$text4 === void 0 ? void 0 : _item$text4.replace(')', '');
  }
  var onClick = function onClick() {
    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
  };
  return /*#__PURE__*/jsxs("div", {
    id: item.codex,
    className: classnames(container, item.sel ? sel : undefined),
    onClick: onClick,
    children: [/*#__PURE__*/jsx("img", {
      style: {
        maxHeight: viewHandler.settingsState.settingsWidth / 3
      },
      src: item.image,
      title: item.text + (item.freeText ? item.freeText : '')
    }), /*#__PURE__*/jsxs("div", {
      className: titleContainer,
      children: [/*#__PURE__*/jsx("div", {
        className: classnames(title),
        children: header
      }), subText && /*#__PURE__*/jsx("div", {
        className: classnames(subTitle),
        children: subText
      })]
    }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
      item: item
    }, item.codex), item.disabledByConstructionRule && /*#__PURE__*/jsx("div", {
      className: classnames(ccConstructionWarning),
      title: t('configurator.' + item.disabledByConstructionRule)
    }), item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
      asyncPricePreview: item.pricePreviewPromise,
      sel: item.sel
    }), item.checkForReversingChanges !== undefined && /*#__PURE__*/jsx(ReverseCheck, {
      item: item,
      paletteId: paletteId
    })]
  });
};

export { OptionJungle as default };
