import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import MultiToggleSwitch from './index-e4d1ba18.js';
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 row = "row-F7HtB";
var colum = "colum-t-N58";
var title = "title-d5AfW";
var toggle = "toggle-oIMCS";
var css_248z = ".wrapper-Ec98j {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-bottom: 24px;\n}\n.multi-toggle-wrapper-RNQU4 {\n  width: calc(100% - 64px);\n  padding: 8px 32px;\n}\n\n.row-F7HtB {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 4px;\n  margin-bottom: 10px;\n  gap: 12px;\n}\n.colum-t-N58 {\n  width: 70%;\n}\n.colum-t-N58:first-child {\n  width: 30%;\n  margin: 10px 0px;\n  position: relative;\n  display: flex;\n  gap: 8px;\n}\n\n.colum-toggle-name-AfLOD {\n  flex-grow: 1;\n  height: 58px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  min-width: 33%;\n}\n\n.title-d5AfW {\n  text-align: left;\n  margin-left: 0;\n  margin-left: initial;\n  cursor: pointer;\n}\n\n.toggle-oIMCS {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n";
styleInject(css_248z);

var MultiToggleComponent = function MultiToggleComponent(_ref) {
  var _item$selectedElement;
  var item = _ref.item,
    style = _ref.style,
    round = _ref.round,
    paletteId = _ref.paletteId;
  var viewHandler = useViewHandler();
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    items = _useState2[0],
    setItems = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    toggleValues = _useState4[0],
    setToggleValues = _useState4[1];
  var _useState5 = useState(),
    _useState6 = _slicedToArray(_useState5, 2),
    curIndex = _useState6[0],
    setCurIndex = _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 allEndWithCM = itemList.every(function (i) {
      return i.text.endsWith('cm');
    });
    setItems(itemList);
    setAllEndWithCM(allEndWithCM);
    setToggleValues(itemList.map(function (i) {
      return allEndWithCM ? i.text.replace('cm', '') : i.text;
    }));
    setCurIndex(itemList.findIndex(function (i) {
      return i.sel;
    }));
  }, [item]);
  var onChangeValue = function onChangeValue(index) {
    setCurIndex(index);
    var item = items[index];
    if (item) viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
  };
  if (items.length === 0) return /*#__PURE__*/jsx(Fragment, {});
  return /*#__PURE__*/jsxs("div", {
    className: row,
    ref: function ref(_ref2) {
      return item.htmlRef = _ref2;
    },
    style: style,
    children: [/*#__PURE__*/jsxs("div", {
      className: classnames(colum, title),
      children: [item.name + (allEndWithCM ? ' (cm)' : ''), ((_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement[0].contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
        item: item.selectedElements[0],
        style: {
          position: 'relative'
        }
      }, item.selectedElements[0].codex)]
    }), /*#__PURE__*/jsx("div", {
      className: classnames(colum, toggle),
      children: /*#__PURE__*/jsx(MultiToggleSwitch, {
        items: items,
        values: toggleValues,
        state: [curIndex, onChangeValue],
        round: round
      })
    })]
  });
};
var MultiToggle = observer(MultiToggleComponent);

export { MultiToggle as default };
