import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useCallback } from 'react';
import { useTranslation } from '@crystaldesign/diva-core';
import { jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var TabGroupItemHorizontal = function TabGroupItemHorizontal(_ref) {
  var _tabGroupsArray$;
  var tabGroup = _ref.tabGroup;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var allTabGroups = viewHandler.tabGroupState.allTabGroups;
  var tabGroupsArray = allTabGroups ? Object.entries(allTabGroups).map(function (_ref2) {
    var _ref3 = _slicedToArray(_ref2, 2),
      tg = _ref3[1];
    return tg;
  }) : [];
  var firstTabKey = (_tabGroupsArray$ = tabGroupsArray[0]) === null || _tabGroupsArray$ === void 0 ? void 0 : _tabGroupsArray$.key;
  var isFirstItem = firstTabKey === tabGroup.key;
  var onTabGroupClick = useCallback(function (tg) {
    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tg.posNr);
  }, [viewHandler.tabGroupState]);
  var setTabRef = useCallback(function (key) {
    return function (el) {
      if (el) viewHandler.tabGroupState.setTabGroupItems(key, el);
    };
  }, [viewHandler.tabGroupState]);
  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
  var activeKey = curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.key;
  if (!isFirstItem || tabGroupsArray.length === 0) return null;
  return /*#__PURE__*/jsx("div", {
    className: "wysiwyg-tab-group-tabs",
    style: {
      display: 'flex',
      gap: 0,
      borderBottom: '1px solid #d9d9d9'
    },
    children: tabGroupsArray.map(function (tg) {
      return /*#__PURE__*/jsx("button", {
        ref: setTabRef(tg.key),
        onClick: function onClick() {
          return onTabGroupClick(tg);
        },
        style: {
          padding: '8px 16px',
          border: 'none',
          borderBottom: tg.key === activeKey ? '2px solid var(--primaryColor, #1677ff)' : '2px solid transparent',
          background: 'none',
          cursor: 'pointer',
          fontWeight: tg.key === activeKey ? 600 : 400,
          color: tg.key === activeKey ? 'var(--primaryColor, #1677ff)' : 'inherit'
        },
        children: t('configurator.' + tg.title, tg.title)
      }, tg.key);
    })
  });
};
var index = observer(TabGroupItemHorizontal);

export { index as default };
