import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
import BlockIcon from '@mui/icons-material/Block';
import WarningIcon from '@mui/icons-material/Warning';
import { getLogger, useTranslation } from '@crystaldesign/diva-core';
import { DivaError } from '@crystaldesign/diva-utils';
import { jsx, Fragment } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import 'mobx-react-lite';
import '@babel/runtime/helpers/asyncToGenerator';
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 'mobx';
import '@crystaldesign/web-planner-logic';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var reverseCheck = "reverse-check-mDnz6";
var blocked = "blocked-bCo2n";
var blockedClickable = "blocked-clickable-ffLmm";
var loading = "loading-eIRqF";
var spinner = "spinner-ibEoI";
var blockedIcon = "blocked-icon-uGIFB";
var warningIcon = "warning-icon-EEpQ2";
var warningContainer = "warning-container-ELvdO";
var css_248z = ".reverse-check-mDnz6 {\n  background-color: rgba(238,238,238,0.93333);\n  position: absolute;\n  padding: 2px 6px;\n  font-size: 12px;\n  height: 100%;\n  width: 100%;\n  line-height: 50%;\n  top: 0;\n  left: 0;\n  white-space: nowrap;\n  z-index: 1000;\n}\n\n.blocked-bCo2n {\n  background-color: rgba(255, 255, 255, 0.7);\n  -webkit-backdrop-filter: blur(1px);\n          backdrop-filter: blur(1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  pointer-events: none;\n}\n\n.blocked-clickable-ffLmm {\n  pointer-events: auto;\n}\n\n.loading-eIRqF {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: wait;\n  pointer-events: auto;\n}\n\n.spinner-ibEoI {\n  width: 20px;\n  height: 20px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  border-top-color: #555;\n  animation: spinner-ibEoI 1s linear infinite;\n}\n\n.blocked-icon-uGIFB {\n  font-size: 32px !important;\n}\n\n.blocked-icon-uGIFB {\n  color: #d32f2f;\n}\n\n.warning-icon-EEpQ2 {\n  font-size: 20px !important;\n}\n\n.warning-icon-EEpQ2 {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  color: #ed6c02;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.warning-container-ELvdO {\n  background-color: transparent;\n  pointer-events: auto;\n  cursor: pointer;\n}\n\n@keyframes spinner-ibEoI {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
styleInject(css_248z);

var LOG = getLogger('Planner', 'ReverseCheck');
var ReverseCheck = function ReverseCheck(_ref) {
  var item = _ref.item,
    paletteId = _ref.paletteId;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var reversingCheckPromise = item.pricePreviewPromise !== undefined ? item.pricePreviewPromise : undefined;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    data = _useState2[0],
    setData = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    loading$1 = _useState4[0],
    setLoading = _useState4[1];
  useEffect(function () {
    var isMounted = true;
    if (reversingCheckPromise) {
      setLoading(true);
      reversingCheckPromise.promise.then(function (result) {
        if (isMounted) {
          setData(result.reversingCheck);
        }
      })["catch"](function (error) {
        LOG.error(new DivaError('Error loading reversing check:', {
          cause: error
        }));
      })["finally"](function () {
        if (isMounted) {
          setLoading(false);
        }
      });
    } else {
      setData(null);
    }
    return function () {
      isMounted = false;
    };
  }, [reversingCheckPromise]);
  var handleBlockedClick = function handleBlockedClick(e) {
    var _viewHandler$actions;
    e.stopPropagation();
    var variantValuesText = Object.values((data === null || data === void 0 ? void 0 : data.reversingVariantValues) || {}).map(function (v) {
      return v.label;
    }).join(', ');
    (_viewHandler$actions = viewHandler.actions) === null || _viewHandler$actions === void 0 || _viewHandler$actions.openModal({
      title: t('configurator.reverseCheck.blocked.title'),
      text: t('configurator.reverseCheck.blocked.text', {
        options: variantValuesText
      }),
      accept: false,
      reject: true,
      rejectByIcon: true
    });
  };
  var handleWarningClick = function handleWarningClick(e) {
    var _viewHandler$actions2;
    e.stopPropagation();
    var variantValuesText = Object.values((data === null || data === void 0 ? void 0 : data.reversingVariantValues) || {}).map(function (v) {
      return v.label;
    }).join(', ');
    (_viewHandler$actions2 = viewHandler.actions) === null || _viewHandler$actions2 === void 0 || _viewHandler$actions2.openModal({
      title: t('configurator.reverseCheck.warning.title'),
      text: t('configurator.reverseCheck.warning.text', {
        options: variantValuesText
      }),
      accept: true,
      reject: true,
      callback: function callback(accepted) {
        if (accepted) {
          viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
        }
      }
    });
  };
  if (!reversingCheckPromise) {
    return /*#__PURE__*/jsx(Fragment, {});
  }
  if (loading$1) {
    return /*#__PURE__*/jsx("div", {
      className: classnames(reverseCheck, loading),
      children: /*#__PURE__*/jsx("div", {
        className: spinner
      })
    });
  }
  if (!data || !data.hasReversingChanges) {
    return /*#__PURE__*/jsx(Fragment, {});
  }
  if (data.checkingForReversingChanges === 'BLOCK') {
    return /*#__PURE__*/jsx("div", {
      className: classnames(reverseCheck, blocked, blockedClickable),
      onClick: handleBlockedClick,
      children: /*#__PURE__*/jsx(BlockIcon, {
        className: blockedIcon,
        id: "blocked-icon"
      })
    });
  }
  if (data.checkingForReversingChanges === 'WARN') {
    return /*#__PURE__*/jsx("div", {
      className: classnames(reverseCheck, warningContainer),
      onClick: handleWarningClick,
      children: /*#__PURE__*/jsx(WarningIcon, {
        className: warningIcon
      })
    });
  }
  return /*#__PURE__*/jsx(Fragment, {});
};

export { ReverseCheck as default };
