import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { useRef, useEffect } from 'react';
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 wrapper = "wrapper-GKYw3";
var wcTabGroupItem = "wcTabGroupItem-xfakc";
var portrait = "portrait-R75Hr";
var tablet = "tablet-QdtJo";
var wcActiveStep = "wcActiveStep-E81Bg";
var wcStepNum = "wcStepNum-fDZJn";
var horizontalLine = "horizontal-line-RQbQm";
var css_248z = ".wrapper-GKYw3 {\n  display: flex;\n  align-items: center;\n  float: left;\n}\n\n.wcTabGroupItem-xfakc {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  border: none;\n  transition: color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n  color: #b5b5b5;\n  cursor: pointer;\n}\n\n.portrait-R75Hr:not(.tablet-QdtJo) .wcTabGroupItem-xfakc {\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 300;\n}\n\n.portrait-R75Hr .wcTabGroupItem-xfakc {\n  line-height: calc(var(--configuratorTabGroupHeight) - 3px);\n}\n\n.wcTabGroupItem-xfakc:hover {\n  color: #262626;\n}\n\n.wcActiveStep-E81Bg .wcTabGroupItem-xfakc {\n  color: #262626;\n}\n\n.wcStepNum-fDZJn {\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  margin-right: 11px;\n  margin-top: 3px;\n  border: 1px solid #b5b5b5;\n  border-radius: 12px;\n  text-align: center;\n  line-height: 25px;\n  font-size: 16px;\n  color: #b5b5b5;\n  transition:\n    color 0.3s ease-out,\n    border 0.3s ease-out;\n}\n\n.wcActiveStep-E81Bg .wcStepNum-fDZJn,\n.wcTabGroupItem-xfakc:hover .wcStepNum-fDZJn {\n  color: #4f555b;\n  border: 1px solid #4f555b;\n}\n\n.portrait-R75Hr:not(.tablet-QdtJo) .wcStepNum-fDZJn {\n  height: 14px;\n  width: 14px;\n  line-height: 14px;\n  font-size: 10px;\n}\n\n.horizontal-line-RQbQm {\n  width: 22px;\n  height: 0px;\n  border: 1px solid #bfbfbf;\n}\n\n.portrait-R75Hr .horizontal-line-RQbQm {\n  width: 10px;\n  border-top: 1px solid #bfbfbf;\n  border-bottom: none;\n}\n\n.tablet-QdtJo .horizontal-line-RQbQm {\n  width: 14px;\n  border-top: 1px solid #bfbfbf;\n  border-bottom: none;\n}\n";
styleInject(css_248z);

var TabGroupItemHorizontaRalph = function TabGroupItemHorizontaRalph(_ref) {
  var tabGroup = _ref.tabGroup;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var tabGroupItemRef = useRef(null);
  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
  useEffect(function () {
    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
  }, [tabGroupItemRef]);
  var onTabGroupClick = function onTabGroupClick(tabGroup) {
    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
  };
  var keys = Object.keys(viewHandler.tabGroupState.allTabGroups);
  var isActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
  var isLastItem = keys[keys.length - 1] == tabGroup.key;
  return /*#__PURE__*/jsxs("div", {
    className: classnames(wrapper, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && isActive ? wcActiveStep : undefined),
    children: [/*#__PURE__*/jsxs("div", {
      ref: tabGroupItemRef,
      onClick: function onClick(e) {
        e.stopPropagation();
        onTabGroupClick(tabGroup);
      },
      className: classnames(wcTabGroupItem),
      children: [!viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("span", {
        className: classnames(wcStepNum),
        children: tabGroup.posNr
      }), t('configurator.' + tabGroup.title, tabGroup.title)]
    }), !isLastItem && /*#__PURE__*/jsx("div", {
      className: horizontalLine
    })]
  });
};
var index = observer(TabGroupItemHorizontaRalph);

export { index as default };
