import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { u as useViewHandler } from './index-bbdfb97a.js';
import { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import ItemVariant from './index-ffed620d.js';
import { jsx, Fragment } 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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var TabGroupHorizontal = function TabGroupHorizontal(props) {
  var viewHandler = useViewHandler();
  useEffect(function () {
    viewHandler.tabGroupState.scrollToCurTabgroupHorizontal();
  }, [viewHandler.tabGroupState.curTabGroup]);
  if (!viewHandler.tabGroupState.allTabGroups) return /*#__PURE__*/jsx(Fragment, {});
  var tabGroups = Object.entries(viewHandler.tabGroupState.allTabGroups);
  return /*#__PURE__*/jsx(Fragment, {
    children: tabGroups.map(function (_ref) {
      var _viewHandler$tabGroup, _viewHandler$tabGroup2;
      var _ref2 = _slicedToArray(_ref, 2),
        key = _ref2[0],
        tabGroup = _ref2[1];
      return /*#__PURE__*/jsx(ItemVariant, {
        tabGroup: tabGroup,
        width: 'calc(' + ((_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState) === null || _viewHandler$tabGroup2 === void 0 || (_viewHandler$tabGroup2 = _viewHandler$tabGroup2.tabGroupScroller) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.getBoundingClientRect().width) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0) + 'px / ' + tabGroups.length + ')'
      }, key);
    })
  });
};
var TabGroupHorizontal$1 = observer(TabGroupHorizontal);

export { TabGroupHorizontal$1 as default };
