import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject } from './index-bbdfb97a.js';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import InfoIcon from './index-04a7a9b4.js';
import { jsx, 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-Y-d99";
var toggleSwitch = "toggle-switch-Mhnmc";
var switchSelection = "switch-selection-WpDtT";
var switchLabel = "switch-label-KDRkk";
var sel = "sel-0rh79";
var css_248z = ".wrapper-Y-d99 {\n  height: 36px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #eaeaea;\n  border-radius: 6px;\n}\n.toggle-switch-Mhnmc {\n  height: calc(100% - 6px);\n  width: calc(100% - 6px);\n  border-radius: 3px;\n  box-sizing: content-box;\n  box-sizing: initial;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.switch-selection-WpDtT {\n  display: block;\n  position: absolute;\n  z-index: 1;\n  height: 30px;\n  background-color: #fff;\n  border-radius: 3px;\n  transition: left 0.25s ease-out;\n}\n\n.switch-label-KDRkk {\n  position: relative;\n  display: flex;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n  line-height: 22px;\n  height: 20px;\n  width: calc(100% - 8px);\n  padding: 6px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.6);\n  text-align: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  transition:\n    color 0.2s ease-out,\n    font-weight 0.2s ease-out;\n}\n\n.sel-0rh79 {\n  font-weight: 300;\n  color: #000;\n}\n";
styleInject(css_248z);

var MultiToggleSwitch = function MultiToggleSwitch(_ref) {
  var values = _ref.values,
    items = _ref.items,
    _ref$state = _slicedToArray(_ref.state, 2),
    selected = _ref$state[0],
    setSelected = _ref$state[1],
    round = _ref.round;
  var widthPercentage = 100 / values.length;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    texts = _useState2[0],
    setTexts = _useState2[1];
  useEffect(function () {
    if (!values.some(function (v) {
      return !v.endsWith('cm');
    })) {
      setTexts(values.map(function (v, i) {
        return v.replace('cm', '') + (i == values.length - 1 ? 'cm' : '');
      }));
    } else {
      setTexts(values);
    }
  }, [values]);
  return /*#__PURE__*/jsx("div", {
    className: wrapper,
    style: {
      borderRadius: round ? '100px' : undefined
    },
    children: /*#__PURE__*/jsxs("div", {
      className: toggleSwitch,
      children: [texts.map(function (val, index) {
        var _items$index;
        return /*#__PURE__*/jsx("div", {
          style: {
            width: widthPercentage + '%'
          },
          children: /*#__PURE__*/jsxs("label", {
            onClick: function onClick() {
              return setSelected(index);
            },
            className: classnames(switchLabel, selected === index && sel),
            children: [val, ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
              item: items[index],
              style: {
                top: -4
              }
            }, items[index].codex)]
          })
        }, index);
      }), /*#__PURE__*/jsx("div", {
        className: switchSelection,
        style: {
          left: selected / values.length * 100 + '%',
          width: widthPercentage + '%',
          borderRadius: round ? '100px' : undefined
        }
      })]
    })
  });
};
var MultiToggleSwitch$1 = observer(MultiToggleSwitch);

export { MultiToggleSwitch$1 as default };
