import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import { ContentBoxComponent } from '@crystaldesign/content-box';
import { observer } from 'mobx-react-lite';
import { jsx } 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 infoButton = "infoButton-1VGiK";
var css_248z = ".infoButton-1VGiK {\n  line-height: 26px;\n  width: 26px;\n  height: 26px;\n  background-color: white;\n  color: var(--primaryColor);\n  text-align: center;\n  cursor: pointer;\n  border: solid 2px var(--primaryColor);\n  border-radius: 50%;\n  margin-left: 10px;\n}\n";
styleInject(css_248z);

var InfoButton = function InfoButton(_ref) {
  var _selectedElement$grou, _selectedElement$long;
  var selectedElement = _ref.selectedElement,
    id = _ref.id,
    openUrl = _ref.openUrl;
  var viewHandler = useViewHandler();
  var text = selectedElement ? ((_selectedElement$grou = selectedElement.groupName) !== null && _selectedElement$grou !== void 0 ? _selectedElement$grou : '') + (selectedElement.parentName ? " (".concat(selectedElement.parentName, ")") : '') + ' ' + ((_selectedElement$long = selectedElement.longDescription) !== null && _selectedElement$long !== void 0 ? _selectedElement$long : '') : '';
  var updateInfoBox = function updateInfoBox() {
    if (!selectedElement) return;
    viewHandler.settingsState.updateInfoBox({
      type: 'info',
      content: /*#__PURE__*/jsx(ContentBoxComponent, {
        onClose: function onClose() {
          return viewHandler.settingsState.updateInfoBox();
        },
        settings: {
          contentBoxProps: {
            type: 'CloseButtonContainer',
            style: {
              background: 'transparent',
              padding: 0
            },
            closeIconSize: '24px',
            content: {
              type: 'InfoBox',
              imageUrl: selectedElement.image,
              title: selectedElement.text,
              text: text
            }
          }
        }
      }),
      id: id,
      key: selectedElement.codex
    });
  };
  var onClick = function onClick() {
    if (openUrl && selectedElement) {
      window.open(selectedElement.url, '_blank');
      return;
    }
    viewHandler.settingsState.setContentItemVisible(false);
    var boxContent = viewHandler.settingsState.infoBoxContent;
    if (boxContent && boxContent.id === id && boxContent.type === 'info') viewHandler.settingsState.updateInfoBox();else updateInfoBox();
  };
  var boxContent = viewHandler.settingsState.infoBoxContent;
  if (boxContent && boxContent.id === id && boxContent.key !== (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.codex) && boxContent.type === 'info') {
    updateInfoBox();
  }
  return /*#__PURE__*/jsx("div", {
    title: 'Info',
    onClick: onClick,
    className: infoButton,
    children: "i"
  });
};
var InfoButton$1 = observer(InfoButton);

export { InfoButton$1 as default };
