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-CXHC0";
var wcTabGroupItem = "wcTabGroupItem-byqO6";
var portrait = "portrait--dsxg";
var tablet = "tablet-xCDe-";
var wcActiveStep = "wcActiveStep-06tW4";
var chevron = "chevron-a7ixM";
var css_248z = ".wrapper-CXHC0 {\n  display: flex;\n  align-items: center;\n  float: left;\n  height: 100%;\n}\n\n.wcTabGroupItem-byqO6 {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 12px;\n  font-size: 14px;\n  font-weight: 300;\n  white-space: nowrap;\n  color: var(--diva-theme-palette-text-secondary);\n  cursor: pointer;\n  transition:\n    color 0.2s ease-out,\n    background-color 0.2s ease-out;\n  line-height: 1;\n  border: none;\n  background: none;\n}\n\n.portrait--dsxg:not(.tablet-xCDe-) .wcTabGroupItem-byqO6 {\n  font-size: 12px;\n  padding: 0 8px;\n}\n\n.wcTabGroupItem-byqO6:hover {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.wcActiveStep-06tW4 .wcTabGroupItem-byqO6 {\n  color: var(--diva-theme-palette-primary-main);\n  background-color: color-mix(in srgb, var(--diva-theme-palette-primary-main) 5%, transparent);\n  border-radius: 2px;\n}\n\n.chevron-a7ixM {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  color: color-mix(in srgb, var(--diva-theme-palette-text-primary) 15%, transparent);\n}\n\n.portrait--dsxg:not(.tablet-xCDe-) .chevron-a7ixM {\n  width: 10px;\n  height: 10px;\n}\n";
styleInject(css_248z);

var TabGroupItemHorizontalInspiration = function TabGroupItemHorizontalInspiration(_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__*/jsx("div", {
      ref: tabGroupItemRef,
      onClick: function onClick(e) {
        e.stopPropagation();
        onTabGroupClick(tabGroup);
      },
      className: classnames(wcTabGroupItem),
      children: t('configurator.' + tabGroup.title, tabGroup.title)
    }), !isLastItem && /*#__PURE__*/jsx("div", {
      className: chevron,
      children: /*#__PURE__*/jsx("svg", {
        width: "12",
        height: "12",
        viewBox: "0 0 12 12",
        fill: "none",
        xmlns: "http://www.w3.org/2000/svg",
        children: /*#__PURE__*/jsx("path", {
          d: "M4 2L8 6L4 10",
          stroke: "currentColor",
          strokeWidth: "0.75",
          strokeLinecap: "round",
          strokeLinejoin: "round"
        })
      })
    })]
  });
};
var index = observer(TabGroupItemHorizontalInspiration);

export { index as default };
