import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import 'react';
import classnames from 'classnames';
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-93hIM";
var button = "button-smefE";
var sel = "sel-vzSUc";
var disabled = "disabled-l3E8B";
var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
styleInject(css_248z);

var ReplaceSwitch = function ReplaceSwitch(props) {
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  return /*#__PURE__*/jsxs("div", {
    className: classnames(wrapper),
    children: [/*#__PURE__*/jsx("div", {
      onClick: function onClick() {
        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
      },
      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
      id: "configurator_plan_tab",
      children: t('configurator.plan')
    }), /*#__PURE__*/jsx("div", {
      onClick: function onClick() {
        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
      },
      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
      id: "configurator_replace_tab",
      children: t('configurator.replace')
    })]
  });
};
var ReplaceSwitch$1 = observer(ReplaceSwitch);

export { ReplaceSwitch$1 as default };
