import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler, P as PricePreview } from './index-bbdfb97a.js';
import { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import classnames from 'classnames';
import InfoIcon from './index-04a7a9b4.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
import '@babel/runtime/helpers/asyncToGenerator';
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 wrapper = "wrapper-7hUK2";
var title = "title-cL4D6";
var boxedContainer = "boxedContainer-4aSLS";
var boxedOption = "boxedOption-pwmLq";
var selected = "selected-Vv66m";
var listContainer = "listContainer-JDin9";
var listOption = "listOption-g5DeJ";
var radioCircle = "radioCircle--nW1H";
var radioInner = "radioInner-b2uFk";
var label = "label-oLz-i";
var css_248z = ".wrapper-7hUK2 {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n  width: 100%;\n}\n\n.title-cL4D6 {\n  font-weight: bold;\n  font-size: 16px;\n  margin-bottom: 16px;\n  text-align: left;\n  color: var(--secondaryColor);\n}\n\n/* Boxed Mode */\n.boxedContainer-4aSLS {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.boxedOption-pwmLq {\n  position: relative;\n  border: 1px solid #e0e0e0;\n  border: 1px solid var(--optionItemBorderColor, #e0e0e0);\n  border-radius: var(--globalBorderRadius);\n  padding: 12px 24px;\n  cursor: pointer;\n  flex: 1;\n  min-width: 120px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.2s ease-in-out;\n  background-color: #fff;\n}\n\n.boxedOption-pwmLq.selected-Vv66m {\n  border-color: var(--primaryColor);\n  color: var(--primaryColor);\n}\n\n/* List Mode */\n.listContainer-JDin9 {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.listOption-g5DeJ {\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: 12px;\n}\n\n.radioCircle--nW1H {\n  width: 24px;\n  height: 24px;\n  border: 2px solid #e0e0e0;\n  border: 2px solid var(--optionItemBorderColor, #e0e0e0);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.radioCircle--nW1H.selected-Vv66m {\n  border-color: var(--primaryColor);\n}\n\n.radioInner-b2uFk {\n  width: 12px;\n  height: 12px;\n  background-color: var(--primaryColor);\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.radioInner-b2uFk.selected-Vv66m {\n  opacity: 1;\n}\n\n.label-oLz-i {\n  font-size: 16px;\n  color: var(--secondaryColor);\n}\n\n.label-oLz-i.selected-Vv66m {\n  color: var(--primaryColor);\n}\n\n/* Helper to toggle between modes for demo */\n.modeToggle-dxDvl {\n  font-size: 10px;\n  color: #999;\n  cursor: pointer;\n  margin-top: 8px;\n  text-decoration: underline;\n  align-self: flex-start;\n}";
styleInject(css_248z);

var Radio = function Radio(_ref) {
  var item = _ref.item,
    style = _ref.style,
    paletteId = _ref.paletteId,
    initialDisplayMode = _ref.displayMode,
    hidePricePreview = _ref.hidePricePreview;
  var viewHandler = useViewHandler();
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    items = _useState2[0],
    setItems = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    curIndex = _useState4[0],
    setCurIndex = _useState4[1];
  var _useState5 = useState(initialDisplayMode || 'boxed'),
    _useState6 = _slicedToArray(_useState5, 2),
    mode = _useState6[0];
    _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    allEndWithCM = _useState8[0],
    setAllEndWithCM = _useState8[1];
  useEffect(function () {
    var itemList = item.groups.flatMap(function (group) {
      return group.items;
    });
    var endsWithCM = itemList.every(function (i) {
      return i.text.endsWith('cm');
    });
    setItems(itemList);
    setAllEndWithCM(endsWithCM);
    setCurIndex(itemList.findIndex(function (i) {
      return i.sel;
    }));
  }, [item]);
  var onChangeValue = function onChangeValue(index) {
    setCurIndex(index);
    var selectedItem = items[index];
    if (selectedItem) {
      viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedItem, undefined, paletteId);
    }
  };
  if (items.length === 0) return /*#__PURE__*/jsx(Fragment, {});
  var getLabelText = function getLabelText(opt) {
    return allEndWithCM ? opt.text.replace('cm', '') : opt.text;
  };
  var renderBoxed = function renderBoxed() {
    return /*#__PURE__*/jsx("div", {
      className: boxedContainer,
      children: items.map(function (opt, index) {
        return /*#__PURE__*/jsxs("div", {
          className: classnames(boxedOption, curIndex === index && selected),
          onClick: function onClick() {
            return onChangeValue(index);
          },
          children: [/*#__PURE__*/jsx("div", {
            dangerouslySetInnerHTML: {
              __html: getLabelText(opt)
            }
          }), opt.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
            item: opt
          }, opt.codex), !hidePricePreview && opt.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
            asyncPricePreview: opt.pricePreviewPromise,
            sel: opt.sel
          })]
        }, index);
      })
    });
  };
  var renderList = function renderList() {
    return /*#__PURE__*/jsx("div", {
      className: listContainer,
      children: items.map(function (opt, index) {
        return /*#__PURE__*/jsxs("div", {
          className: listOption,
          onClick: function onClick() {
            return onChangeValue(index);
          },
          children: [/*#__PURE__*/jsx("div", {
            className: classnames(radioCircle, curIndex === index && selected),
            children: /*#__PURE__*/jsx("div", {
              className: classnames(radioInner, curIndex === index && selected)
            })
          }), /*#__PURE__*/jsx("div", {
            className: classnames(label, curIndex === index && selected),
            dangerouslySetInnerHTML: {
              __html: getLabelText(opt)
            }
          }), opt.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
            item: opt
          }, opt.codex), !hidePricePreview && opt.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
            asyncPricePreview: opt.pricePreviewPromise,
            sel: opt.sel
          })]
        }, index);
      })
    });
  };
  return /*#__PURE__*/jsxs("div", {
    className: wrapper,
    ref: function ref(_ref2) {
      return item.htmlRef = _ref2;
    },
    style: style,
    children: [/*#__PURE__*/jsx("div", {
      className: title,
      children: item.name + (allEndWithCM ? ' (cm)' : '')
    }), mode === 'boxed' ? renderBoxed() : renderList()]
  });
};
var Radio$1 = observer(Radio);

export { Radio$1 as default };
