import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import { observer } from 'mobx-react-lite';
import { jsx, Fragment, jsxs } 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/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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var wrapper = "wrapper-XC5WL";
var doneBar = "doneBar-xosJY";
var todoBar = "todoBar-sVQM-";
var css_248z = ".wrapper-XC5WL {\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  bottom: 0;\n  left: 0;\n  z-index: 2000;\n}\n\n.doneBar-xosJY {\n  background: #ccc;\n  border-radius: 0 1px 1px 0;\n  transition: width 0.35s ease-in-out;\n  height: 100%;\n}\n\n.todoBar-sVQM- {\n  background: #eee;\n  transition: width 0.35s ease-in-out;\n  height: 100%;\n}\n";
styleInject(css_248z);

var ProgressBar = function ProgressBar(_ref) {
  var _viewHandler$configur;
  _objectDestructuringEmpty(_ref);
  var viewHandler = useViewHandler();
  var lastStep = (_viewHandler$configur = viewHandler.configuratorStructureHandler) === null || _viewHandler$configur === void 0 ? void 0 : _viewHandler$configur.lastConfigStep;
  var currentStep = viewHandler.tabGroupState.curConfigStep;
  if (!lastStep || !currentStep) return /*#__PURE__*/jsx(Fragment, {});
  var current = currentStep.posNr;
  var total = lastStep.posNr;
  var doneInPercent = total == 1 ? 0 : Math.round(current / total * 100);
  var todoInPercent = 100 - doneInPercent;
  return /*#__PURE__*/jsxs("div", {
    className: wrapper,
    children: [/*#__PURE__*/jsx("div", {
      className: doneBar,
      style: {
        width: doneInPercent + '%'
      }
    }), /*#__PURE__*/jsx("div", {
      className: todoBar,
      style: {
        width: todoInPercent + '%'
      }
    })]
  });
};
var ProgressBar$1 = observer(ProgressBar);

export { ProgressBar$1 as default };
