import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import QRCode from 'react-qr-code';
import { observer } from 'mobx-react-lite';
import React, { useRef, useEffect } from 'react';
import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
import { Arrow } from 'react-laag';
import { jsxs, jsx } from 'react/jsx-runtime';
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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var wrapper = "wrapper-E7OAf";
var qrCodeWrapper = "qr-code-wrapper-I0N1r";
var textWrapper = "text-wrapper-HcIJv";
var header = "header-TxcNf";
var text = "text-5GiNL";
var closeIcon = "close-icon-SiRMa";
var doneBar = "doneBar-7QqkY";
var css_248z = ".wrapper-E7OAf {\n  background: #ffffff;\n  border-radius: 3px;\n  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));\n  display: flex;\n  padding: 22px;\n  gap: 12px;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out;\n}\n\n.qr-code-wrapper-I0N1r {\n  width: 96px;\n  height: 96px;\n}\n\n.text-wrapper-HcIJv {\n  display: flex;\n  flex-direction: column;\n  color: #000000;\n  width: 220px;\n  gap: 8px;\n}\n\n.header-TxcNf {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 17px;\n  line-height: 19px;\n}\n\n.text-5GiNL {\n  font-weight: 300;\n  font-size: 16px;\n  line-height: 130%;\n}\n\n.close-icon-SiRMa {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 42px;\n  height: 42px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 80%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id%3D%22mask0_332_143%22 style%3D%22mask-type%3Aalpha%22 maskUnits%3D%22userSpaceOnUse%22 x%3D%220%22 y%3D%220%22 width%3D%2224%22 height%3D%2224%22%3E%3Crect width%3D%2224%22 height%3D%2224%22 fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg mask%3D%22url(%23mask0_332_143)%22%3E%3Cpath d%3D%22M8.22749 16.8365L7.16406 15.7731L10.9372 12L7.16406 8.2519L8.22749 7.18848L12.0006 10.9616L15.7487 7.18848L16.8121 8.2519L13.039 12L16.8121 15.7731L15.7487 16.8365L12.0006 13.0634L8.22749 16.8365Z%22 fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-SiRMa:hover {\n  background-size: 90%;\n}\n.doneBar-7QqkY {\n  background: var(--secondaryColor);\n  height: 3px;\n  border-radius: 0 2px 2px 0;\n  animation-name: example-saRWU;\n  animation-timing-function: linear;\n  transition: width 0s ease-in;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n@keyframes example-saRWU {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0%;\n  }\n}\n";
styleInject(css_248z);

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ArQrCodeTooltip = function ArQrCodeTooltip(_ref) {
  var _theme$typography;
  var layerProps = _ref.layerProps,
    arrowProps = _ref.arrowProps,
    autoClose = _ref.autoClose,
    fadeIn = _ref.fadeIn,
    fadeout = _ref.fadeout,
    url = _ref.url;
  var viewHandler = useViewHandler();
  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
  var AUTOHIDE_SEC = arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.timeUnitAutohide ? arQrCodeConfig.timeUnitAutohide : 6;
  var _useDivaCore = useDivaCore(),
    theme = _useDivaCore.state.theme;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var autoCloseTimeout = useRef();
  useEffect(function () {
    //if opend automatically close after AUTOHIDE_SEC the tooltip again
    if (autoClose) {
      if (!(autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current)) autoCloseTimeout.current = setTimeout(function () {
        return viewHandler.productState.setDoShowARQRCode(false);
      }, (AUTOHIDE_SEC + 1) * 1000);
    }
    return function () {
      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
    };
  }, [autoClose]);

  //clear autoclose when user interacts with button
  useEffect(function () {
    if (!viewHandler.productState.doShowARQRCode) {
      if (autoCloseTimeout !== null && autoCloseTimeout !== void 0 && autoCloseTimeout.current) clearTimeout(autoCloseTimeout.current);
    } else viewHandler.productState.setArCodeWasVisibleOnce();
  }, [viewHandler.productState.doShowARQRCode]);
  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, layerProps), {}, {
    className: wrapper,
    style: _objectSpread(_objectSpread({
      opacity: fadeout ? 0 : fadeIn ? 1 : undefined
    }, layerProps.style), {}, {
      zIndex: 1000005
    }),
    children: [/*#__PURE__*/jsx("div", {
      className: qrCodeWrapper,
      children: url && /*#__PURE__*/React.createElement(QRCode, {
        value: url,
        size: 96,
        onClick: function onClick() {
          return url && window.open(url, '_blank');
        }
      })
    }), /*#__PURE__*/jsxs("div", {
      className: textWrapper,
      style: {
        fontFamily: theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily
      },
      children: [/*#__PURE__*/jsx("div", {
        className: header,
        children: t('configurator.ar_qr_title')
      }), /*#__PURE__*/jsx("div", {
        className: text,
        children: t('configurator.ar_qr_text')
      })]
    }), /*#__PURE__*/jsx("div", {
      className: closeIcon,
      onClick: function onClick() {
        return viewHandler.productState.setDoShowARQRCode(false);
      }
    }), /*#__PURE__*/jsx(Arrow, _objectSpread({
      onPointerEnterCapture: undefined,
      onPointerLeaveCapture: undefined
    }, arrowProps)), autoClose && /*#__PURE__*/jsx("div", {
      className: doneBar,
      style: {
        animationDuration: AUTOHIDE_SEC + 's'
      }
    })]
  }));
};
var Tooltip = observer(ArQrCodeTooltip);

export { Tooltip as default };
