import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import 'react';
import classnames from 'classnames';
import { useTranslation } 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 optionTitleWrapper = "option-title-wrapper-nelTh";
var optionTitle = "option-title-b23DF";
var defined = "defined-9MId3";
var current = "current-XPc15";
var optionValue = "option-value-0dXL2";
var suggested = "suggested-cnTpG";
var required = "required-JhxVe";
var disabled = "disabled-YODb1";
var css_248z = ".option-title-wrapper-nelTh {\n  color: #fff;\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  padding: 8px 24px;\n  cursor: pointer;\n  transition: background-color ease 0.3s;\n  border-right: #5b798b 8px solid;\n  flex-wrap: wrap;\n  overflow: hidden;\n}\n\n.option-title-wrapper-nelTh:hover {\n  background-color: #4b6e84;\n}\n\n.option-title-b23DF {\n  font-weight: 600;\n}\n.defined-9MId3 {\n  border-right: #53ac00 8px solid;\n  background-color: #0d3040;\n}\n\n.defined-9MId3:hover {\n  background-color: #134054;\n}\n.current-XPc15 {\n  border-right: #edff2a 8px solid;\n  background-color: #1e455b;\n}\n.option-value-0dXL2 {\n  max-width: 70%;\n  overflow: hidden;\n}\n\n.suggested-cnTpG {\n  border-right: #ff958b 8px solid;\n}\n\n.required-JhxVe {\n  border-right: #ff2a2a 8px solid;\n}\n.disabled-YODb1 {\n  background-color: #9da7ad;\n}\n.option-title-wrapper-nelTh.disabled-YODb1:hover {\n  cursor: not-allowed;\n  background-color: #9da7ad;\n}\n";
styleInject(css_248z);

var OptionStepComponent = function OptionStepComponent(_ref) {
  var _configStep$optionsta, _configStep$optionsta2, _configStep$optionsta3, _configStep$optionsta4, _configStep$optionsta5, _configStep$optionsta6, _configStep$optionsta7, _configStep$optionsta8;
  var _ref$step = _ref.step,
    option = _ref$step.option,
    configStep = _ref$step.configStep;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var value = (_configStep$optionsta = configStep.optionstate) === null || _configStep$optionsta === void 0 ? void 0 : _configStep$optionsta.valName;
  var isRequired = (_configStep$optionsta2 = configStep.optionstate) === null || _configStep$optionsta2 === void 0 ? void 0 : _configStep$optionsta2.isRequired;
  var isSuggested = (_configStep$optionsta3 = configStep.optionstate) === null || _configStep$optionsta3 === void 0 ? void 0 : _configStep$optionsta3.isSuggested;
  if ((_configStep$optionsta4 = configStep.optionstate) !== null && _configStep$optionsta4 !== void 0 && _configStep$optionsta4.isDifferentOption) {
    value = 'divers';
  } else if ((_configStep$optionsta5 = configStep.optionstate) !== null && _configStep$optionsta5 !== void 0 && _configStep$optionsta5.freeTextLang) {
    var text = '';
    var freetexts = configStep.optionstate.freeTextLang;
    for (var key in freetexts) {
      var _freetexts$key;
      text += key + ': ' + ((_freetexts$key = freetexts[key]) !== null && _freetexts$key !== void 0 ? _freetexts$key : '') + ';';
    }
    if (text) value = text;
  } else if ((_configStep$optionsta6 = configStep.optionstate) !== null && _configStep$optionsta6 !== void 0 && _configStep$optionsta6.freeText) {
    value = configStep.optionstate.freeText + (!viewHandler.getViewConfig().hideMeasureUnit ? ' ' + configStep.optionstate.measureUnit : '');
  } else if ((_configStep$optionsta7 = configStep.optionstate) !== null && _configStep$optionsta7 !== void 0 && _configStep$optionsta7.isMultiselect && (_configStep$optionsta8 = configStep.optionstate) !== null && _configStep$optionsta8 !== void 0 && (_configStep$optionsta8 = _configStep$optionsta8.multiSelects) !== null && _configStep$optionsta8 !== void 0 && _configStep$optionsta8.length) {
    var _configStep$optionsta9, _configStep$optionsta10;
    value = ((_configStep$optionsta9 = (_configStep$optionsta10 = configStep.optionstate) === null || _configStep$optionsta10 === void 0 ? void 0 : _configStep$optionsta10.multiSelects) !== null && _configStep$optionsta9 !== void 0 ? _configStep$optionsta9 : []).map(function (opv) {
      return opv.name;
    }).join(',');
  }
  return /*#__PURE__*/jsxs("div", {
    className: classnames(optionTitleWrapper, viewHandler.configuratorStructureHandler.curOptionCodex === option.codex ? current : undefined, viewHandler.configStepAlreadyVisited(configStep) ? defined : undefined, configStep.isDisabledByDiverseParentOption ? disabled : undefined, isSuggested ? suggested : undefined, isRequired ? required : undefined),
    title: configStep.isDisabledByDiverseParentOption ? t('configurator.disable_tabgroup_classification') : undefined,
    onClick: function onClick() {
      if (configStep.isDisabledByDiverseParentOption) return;
      viewHandler.navigateToConfigStep(configStep.key);
    },
    children: [/*#__PURE__*/jsx("div", {
      className: optionTitle,
      title: !configStep.isDisabledByDiverseParentOption ? option.codex : undefined,
      children: option.title
    }), /*#__PURE__*/jsx("div", {
      className: optionValue,
      title: !configStep.isDisabledByDiverseParentOption ? value : undefined,
      children: value
    })]
  });
};
var ConfigStep = observer(OptionStepComponent);

export { ConfigStep as default };
