import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useState, useRef, useEffect } from 'react';
import { useLayer } from 'react-laag';
import Tooltip from './index-5a146745.js';
import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
import classnames from 'classnames';
import FullscreenAr, { FullscreenArHeader } from './index-c648d661.js';
import QRCode from 'react-qr-code';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import 'react-dynamic-multi-render';
import '@babel/runtime/helpers/asyncToGenerator';
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 _excluded = ["Button", "dontOpenModal"];
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 Button = _ref.Button,
    dontOpenModal = _ref.dontOpenModal,
    props = _objectWithoutProperties(_ref, _excluded);
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useDivaCore = useDivaCore(),
    openDrawerMenu = _useDivaCore.actions.openDrawerMenu,
    _useDivaCore$state = _useDivaCore.state,
    isMobile = _useDivaCore$state.isMobile,
    isTablet = _useDivaCore$state.dimensions.isTablet;
  //tooltip is going to close itself by timer
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    autoClose = _useState2[0],
    setAutoClose = _useState2[1];
  var autoCloseTimeout = useRef();
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    openDrawer = _useState4[0],
    setOpenDrawer = _useState4[1];
  var arQrCodeConfig = viewHandler.getViewConfig().arQrCodeConfig;
  var openAr = isMobile || isTablet;
  //if the viewer is in an iframe (pfister) we dont want to open the modal for the arcombi
  var shouldOpenModal = openAr && !viewHandler.productState.allow3DComb && !viewHandler.productState.allowRTV;

  //for fade animation
  var _useState5 = useState(viewHandler.productState.arCodeWasVisibleOnce),
    _useState6 = _slicedToArray(_useState5, 2),
    tooltipVisible = _useState6[0],
    setTooltipVisible = _useState6[1];
  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible && !dontOpenModal;
  var _useLayer = useLayer({
      isOpen: showTooltip,
      auto: true,
      placement: 'right-end',
      triggerOffset: 16
    }),
    triggerProps = _useLayer.triggerProps,
    layerProps = _useLayer.layerProps,
    renderLayer = _useLayer.renderLayer,
    arrowProps = _useLayer.arrowProps;
  var _useState7 = useState(),
    _useState8 = _slicedToArray(_useState7, 2),
    url = _useState8[0],
    setUrl = _useState8[1];
  useEffect(function () {
    var _viewHandler$uiState$;
    if (viewHandler.uiState.AllConfig.arViewerIframe) return;
    openDrawerMenu({
      id: 'ar-qr-code',
      mountElement: (_viewHandler$uiState$ = viewHandler.uiState.wrapperRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
      handleInternScroll: true,
      showOverlay: true,
      direction: 'bottom',
      onClose: function onClose() {
        setOpenDrawer(false);
        viewHandler.productState.loadRTVForAr = false;
        viewHandler.productState.setDoShowARQRCode(false);
        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : viewHandler.productState.allowRTV ? 'RTV' : '3D');
      },
      title: /*#__PURE__*/jsx(FullscreenArHeader, {}),
      content: /*#__PURE__*/jsx(FullscreenAr, {
        url: url,
        isArCompatible: viewHandler.productState.isArCompatible,
        broswerSupportAR: viewHandler.productState.browserSupportAR,
        activateAR: viewHandler.productState.activateAR,
        hqRenderScript: viewHandler.hqRenderScript,
        isTablet: isTablet
      }),
      open: openDrawer
    });
  }, [openDrawer, viewHandler.productState.activateAR]);
  useEffect(function () {
    if (viewHandler.productState.doShowARQRCode == true) {
      viewHandler.openARObserverConnection(function () {
        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
      } // request hqr onreceivehqr triggers update
      ).then(function (url) {
        return setUrl(url);
      });
    }
  }, [viewHandler.productState.doShowARQRCode]);
  useEffect(function () {
    if (viewHandler.productState.doShowARQRCode && shouldOpenModal) {
      setOpenDrawer(true);
    }
  }, [viewHandler.productState.activateAR, url]);
  useEffect(function () {
    //start timeout for auto open the tooltip
    if (dontOpenModal) return;
    if (!viewHandler.productState.arCodeWasVisibleOnce && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
      var _arQrCodeConfig$timeU;
      autoCloseTimeout.current = setTimeout(function () {
        viewHandler.productState.setArCodeWasVisibleOnce();
        setAutoClose(true);
        viewHandler.productState.setDoShowARQRCode(true);
      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
    }
    if (!viewHandler.productState.doShowARQRCode && autoClose) {
      setAutoClose(false);
    }
    //delay the state of visible so we animate the fade out
    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
      setTimeout(function () {
        setTooltipVisible(viewHandler.productState.doShowARQRCode);
      }, 200);
    }
  }, [viewHandler.productState.doShowARQRCode]);
  var onClick = function onClick() {
    viewHandler.productState.setDoShowARQRCode(true);
    var curPlannerMode = viewHandler.viewPlannerHandler.getCurPlannerViewMode();
    if (shouldOpenModal) {
      if (!viewHandler.productState.doShowRTV && !(curPlannerMode == 'RTViewer' || curPlannerMode == '3DCOMB')) {
        viewHandler.setHQRenderScript(undefined);
        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
      }
      setOpenDrawer(true);
      viewHandler.productState.loadRTVForAr = true;
    } else if (openAr && (curPlannerMode == 'RTViewer' || curPlannerMode == '3DCOMB')) {
      viewHandler.productState.loadRTVForAr = true;
      setOpenDrawer(true);
    }
  };
  if (url && !openAr && dontOpenModal) {
    return /*#__PURE__*/jsxs("div", {
      style: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%'
      },
      children: [/*#__PURE__*/jsx(QRCode, {
        value: url,
        size: 96,
        onClick: function onClick() {
          return url && window.open(url, '_blank');
        }
      }), ";"]
    });
  }
  if (Button) {
    return /*#__PURE__*/jsx(Button, {
      onClick: onClick
    });
  }
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
      id: "ar-icon"
    }, props), {}, {
      className: classnames(props.className),
      onClick: onClick,
      title: t('configurator.ar_qr_title')
    }, triggerProps), {}, {
      style: {
        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV || viewHandler.productState.doShowAIRoom ? 'visible' : 'hidden'
      }
    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
      arrowProps: arrowProps,
      layerProps: layerProps,
      autoClose: autoClose,
      fadeIn: tooltipVisible,
      fadeout: !viewHandler.productState.doShowARQRCode,
      url: url
    }))]
  });
};
var ArQrCodeIcon = observer(ArQrCodeTooltip);

export { ArQrCodeIcon as default };
