import { s as styleInject } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import React from 'react';
import QRCode from 'react-qr-code';
import classnames from 'classnames';
import { getLogger, useTranslation } from '@crystaldesign/diva-core';
import { jsx, jsxs, Fragment } 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 fullscreen = "fullscreen-dVNtA";
var errorWrapper = "error-wrapper-4Kfuq";
var errorText = "error-text-aG0TS";
var errorQrCodeWrapper = "error-qr-code-wrapper-WRr2H";
var wrapper = "wrapper-uzZ9r";
var tablet = "tablet-CPL9b";
var textWrapper = "text-wrapper-rIzGz";
var header = "header-sWWoX";
var text = "text-OkwbY";
var stepsWrapper = "steps-wrapper-4x10n";
var stepWrapper = "step-wrapper-HY2sH";
var stepTextWrapper = "step-text-wrapper-S-m1m";
var stepTitle = "step-title-M7iLu";
var stepText = "step-text-LPg7J";
var icon = "icon-K4UgE";
var svgIcon = "svg-icon-Ex5u5";
var buttonWrapper = "button-wrapper-t88VM";
var arButton = "ar-button-e122r";
var disabled = "disabled-5mNQN";
var qrCodeWrapper = "qr-code-wrapper-gox11";
var loader = "loader-5y0Dw";
var css_248z = ".fullscreen-dVNtA {\n  overflow: auto;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.error-wrapper-4Kfuq {\n  display: flex;\n  gap: 48px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.error-text-aG0TS {\n  max-width: 400px;\n}\n.error-qr-code-wrapper-WRr2H {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.wrapper-uzZ9r {\n  display: flex;\n  flex-direction: column;\n  margin: 8px 32px;\n  gap: 42px;\n  color: #000;\n  width: calc(100% - 64px);\n}\n\n.tablet-CPL9b .wrapper-uzZ9r {\n  gap: 64px;\n  width: auto;\n  width: initial;\n  max-width: 600px;\n}\n\n.text-wrapper-rIzGz {\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n}\n\n.header-sWWoX {\n  max-width: calc(100% - 32px);\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 40px;\n  height: 40px;\n}\n\n.text-OkwbY {\n  font-weight: 300;\n  font-size: 18px;\n  line-height: 130%;\n}\n\n.steps-wrapper-4x10n {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.tablet-CPL9b .steps-wrapper-4x10n {\n  gap: 32px;\n}\n\n.step-wrapper-HY2sH {\n  display: flex;\n  gap: 12px;\n}\n\n.step-text-wrapper-S-m1m {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  justify-content: center;\n}\n\n.step-title-M7iLu {\n  font-weight: 300;\n  font-size: 16px;\n  color: #7b7b7b;\n}\n\n.step-text-LPg7J {\n  font-size: 14px;\n  color: #000000;\n}\n\n.icon-K4UgE {\n  border-radius: 50%;\n  background-color: #f2f2f2;\n  width: 56px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.svg-icon-Ex5u5 {\n  width: 50%;\n  height: 50%;\n}\n.button-wrapper-t88VM {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ar-button-e122r {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 21px;\n  gap: 10px;\n  background-color: var(--primaryColor);\n  border-radius: 3px;\n  cursor: pointer;\n  transition:\n    box-shadow 0.3s,\n    background-color 0.3s ease,\n    color 0.3s ease;\n  font-weight: 600;\n  letter-spacing: 0.8px;\n  color: #fff;\n  height: 38px;\n}\n.disabled-5mNQN {\n  cursor: wait;\n  background-color: var(--secondaryColor);\n}\n\n.ar-button-e122r:hover {\n  box-shadow: 0px 1px 4px #707070;\n}\n.ar-button-e122r.disabled-5mNQN:hover {\n  box-shadow: none;\n}\n\n.qr-code-wrapper-gox11 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: 64px;\n}\n\n.loader-5y0Dw {\n  border: 3px solid #f3f3f3;\n  border-radius: 50%;\n  border-top: 3px solid #aaa;\n  width: 25px;\n  height: 25px;\n  animation: spinner-mDqax 2s linear infinite;\n}\n\n@keyframes spinner-mDqax {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
styleInject(css_248z);

var CameraIcon = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22mask0_300_30100%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_300_30100%29%22%3E%3Cpath%20d%3D%22M4.54815%2019.5C4.04302%2019.5%203.61545%2019.325%203.26545%2018.975C2.91547%2018.625%202.74048%2018.1974%202.74048%2017.6923V6.30773C2.74048%205.8026%202.91547%205.37503%203.26545%205.02503C3.61545%204.67503%204.04302%204.50003%204.54815%204.50003H15.9327C16.4378%204.50003%2016.8654%204.67503%2017.2154%205.02503C17.5654%205.37503%2017.7404%205.8026%2017.7404%206.30773V10.8847L21.2596%207.36546V16.6346L17.7404%2013.1154V17.6923C17.7404%2018.1974%2017.5654%2018.625%2017.2154%2018.975C16.8654%2019.325%2016.4378%2019.5%2015.9327%2019.5H4.54815ZM4.54815%2018H15.9327C16.0225%2018%2016.0962%2017.9712%2016.1539%2017.9135C16.2116%2017.8558%2016.2404%2017.782%2016.2404%2017.6923V6.30773C16.2404%206.21798%2016.2116%206.14426%2016.1539%206.08656C16.0962%206.02886%2016.0225%206.00001%2015.9327%206.00001H4.54815C4.4584%206.00001%204.38468%206.02886%204.32698%206.08656C4.26928%206.14426%204.24043%206.21798%204.24043%206.30773V17.6923C4.24043%2017.782%204.26928%2017.8558%204.32698%2017.9135C4.38468%2017.9712%204.4584%2018%204.54815%2018Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3Cpath%20d%3D%22M5%2011.75L8.90383%2015.6539L15.6269%208.93078L14.573%207.87695L8.90383%2013.5462L6.05383%2010.6962L5%2011.75Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";

var LightbulbIcon = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22mask0_300_30110%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_300_30110%29%22%3E%3Cpath%20d%3D%22M12%2020.9422C11.5987%2020.9422%2011.2439%2020.8365%2010.9356%2020.6249C10.6272%2020.4134%2010.4115%2020.1358%2010.2884%2019.7922H9.99997C9.59101%2019.7922%209.23877%2019.6445%208.94327%2019.349C8.64776%2019.0535%208.5%2018.7012%208.5%2018.2923V15.0115C7.49103%2014.4%206.69712%2013.5801%206.11827%2012.5519C5.53942%2011.5237%205.25%2010.4231%205.25%209.25001C5.25%207.36797%205.90448%205.77246%207.21345%204.46348C8.52243%203.15451%2010.1179%202.50003%2012%202.50003C13.882%202.50003%2015.4775%203.15451%2016.7865%204.46348C18.0955%205.77246%2018.75%207.36797%2018.75%209.25001C18.75%2010.4436%2018.4605%2011.5494%2017.8817%2012.5673C17.3028%2013.5853%2016.5089%2014.4%2015.5%2015.0115V18.2923C15.5%2018.7012%2015.3522%2019.0535%2015.0567%2019.349C14.7612%2019.6445%2014.4089%2019.7922%2014%2019.7922H13.7115C13.5884%2020.1358%2013.3727%2020.4134%2013.0644%2020.6249C12.7561%2020.8365%2012.4013%2020.9422%2012%2020.9422ZM9.99997%2018.2923H14V17.3538H9.99997V18.2923ZM9.99997%2016.4692H14V15.5H9.99997V16.4692ZM9.79997%2014H11.4038V11.0885L9.26153%208.94616L10.1%208.10771L12%2010.0077L13.9%208.10771L14.7384%208.94616L12.5961%2011.0885V14H14.2C15.1%2013.5667%2015.8333%2012.9292%2016.4%2012.0875C16.9666%2011.2458%2017.25%2010.3%2017.25%209.25001C17.25%207.78334%2016.7416%206.54167%2015.725%205.52501C14.7083%204.50834%2013.4666%204.00001%2012%204.00001C10.5333%204.00001%209.29164%204.50834%208.27497%205.52501C7.25831%206.54167%206.74997%207.78334%206.74997%209.25001C6.74997%2010.3%207.03331%2011.2458%207.59997%2012.0875C8.16664%2012.9292%208.89997%2013.5667%209.79997%2014Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";

var ScannIcon = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.6538L6.09619%2015.75L7.16539%2014.6808L9.25004%2016.7654V12.25H10.75V16.7501L12.8192%2014.6654L13.9038%2015.75L10%2019.6538ZM4.25002%2013.9038L0.346191%2010L4.23464%206.11158L5.30384%207.18078L3.23459%209.25003H7.74999V10.75H3.24997L5.33462%2012.8192L4.25002%2013.9038ZM15.75%2013.9038L14.6808%2012.8346L16.7654%2010.75H12.25V9.25003H16.7501L14.6654%207.18078L15.75%206.09618L19.6538%2010L15.75%2013.9038ZM9.25004%207.74998V3.23458L7.16539%205.3192L6.09619%204.25L10%200.346176L13.9038%204.25L12.8346%205.3192L10.75%203.23458V7.74998H9.25004Z%22%20fill%3D%22%231C1B1F%22%2F%3E%3C%2Fsvg%3E";

var LOG = getLogger('Planner', 'WEB-PLANNER-REACT');
var FullscreenArHeader = function FullscreenArHeader() {
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  return /*#__PURE__*/jsx("div", {
    className: header,
    children: t('configurator.ar_qr_title')
  });
};
var FullscreenAr = function FullscreenAr(_ref) {
  var url = _ref.url,
    isArCompatible = _ref.isArCompatible,
    broswerSupportAR = _ref.broswerSupportAR,
    activateAR = _ref.activateAR,
    hqRenderScript = _ref.hqRenderScript,
    isTablet = _ref.isTablet;
  var _useTranslation2 = useTranslation(),
    t = _useTranslation2.t;
  var onClick = function onClick() {
    LOG.businessEvent('onInitARViewer', 'RealTimeViewer', 'Load AR viewer', {
      arMedia: url,
      hqRenderScript: hqRenderScript
    });
    activateAR === null || activateAR === void 0 || activateAR();
  };
  if (isArCompatible == false || !broswerSupportAR) {
    return /*#__PURE__*/jsxs("div", {
      className: errorWrapper,
      children: [/*#__PURE__*/jsx("div", {
        className: errorText,
        dangerouslySetInnerHTML: {
          __html: t('arviewer.failed')
        }
      }), /*#__PURE__*/jsxs("div", {
        className: errorQrCodeWrapper,
        children: [" ", url && /*#__PURE__*/React.createElement(QRCode, {
          value: url,
          size: 220
        })]
      })]
    });
  }
  return /*#__PURE__*/jsx("div", {
    className: classnames(fullscreen, isTablet ? tablet : undefined),
    children: /*#__PURE__*/jsxs("div", {
      className: wrapper,
      children: [/*#__PURE__*/jsx("div", {
        className: textWrapper,
        children: /*#__PURE__*/jsx("div", {
          className: text,
          children: t('configurator.ar_qr_text')
        })
      }), /*#__PURE__*/jsxs("div", {
        className: stepsWrapper,
        children: [/*#__PURE__*/jsxs("div", {
          className: stepWrapper,
          children: [/*#__PURE__*/jsx("div", {
            className: icon,
            children: /*#__PURE__*/jsx("img", {
              src: CameraIcon,
              alt: "",
              className: svgIcon
            })
          }), /*#__PURE__*/jsxs("div", {
            className: stepTextWrapper,
            children: [/*#__PURE__*/jsx("div", {
              className: stepTitle,
              children: t('configurator.ar_qr_step') + ' 1'
            }), /*#__PURE__*/jsx("div", {
              className: stepText,
              children: t('configurator.ar_qr_step1')
            })]
          })]
        }), /*#__PURE__*/jsxs("div", {
          className: stepWrapper,
          children: [/*#__PURE__*/jsx("div", {
            className: icon,
            children: /*#__PURE__*/jsx("img", {
              src: LightbulbIcon,
              alt: "",
              className: svgIcon
            })
          }), /*#__PURE__*/jsxs("div", {
            className: stepTextWrapper,
            children: [/*#__PURE__*/jsx("div", {
              className: stepTitle,
              children: t('configurator.ar_qr_step') + ' 2'
            }), /*#__PURE__*/jsx("div", {
              className: stepText,
              children: t('configurator.ar_qr_step2')
            })]
          })]
        }), /*#__PURE__*/jsxs("div", {
          className: stepWrapper,
          children: [/*#__PURE__*/jsx("div", {
            className: icon,
            children: /*#__PURE__*/jsx("img", {
              src: ScannIcon,
              alt: "",
              className: svgIcon
            })
          }), /*#__PURE__*/jsxs("div", {
            className: stepTextWrapper,
            children: [/*#__PURE__*/jsx("div", {
              className: stepTitle,
              children: t('configurator.ar_qr_step') + ' 3'
            }), /*#__PURE__*/jsx("div", {
              className: stepText,
              children: t('configurator.ar_qr_step3')
            })]
          })]
        })]
      }), /*#__PURE__*/jsx("div", {
        className: buttonWrapper,
        children: /*#__PURE__*/jsx("div", {
          "aria-disabled": !activateAR,
          className: classnames(arButton, !activateAR ? disabled : undefined),
          onClick: onClick,
          children: activateAR ? t('configurator.open_ar') : /*#__PURE__*/jsxs(Fragment, {
            children: [/*#__PURE__*/jsx("div", {
              className: loader
            }), t('arviewer.initializing')]
          })
        })
      }), /*#__PURE__*/jsx("div", {
        className: text,
        children: t('configurator.ar_qr_bottom_text')
      }), url && /*#__PURE__*/jsxs("div", {
        className: qrCodeWrapper,
        children: [" ", url && /*#__PURE__*/React.createElement(QRCode, {
          value: url,
          size: 220
        })]
      })]
    })
  });
};
var FullscreenAr$1 = observer(FullscreenAr);

export { FullscreenArHeader, FullscreenAr$1 as default };
