import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useState, useEffect } from 'react';
import { ContentItemComponent } from '@crystaldesign/content-item';
import { getLogger, useDivaCore } from '@crystaldesign/diva-core';
import { jsx, Fragment } from 'react/jsx-runtime';
import 'react-dynamic-multi-render';
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 '@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';

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 LOG = getLogger('Planner', 'InfoBox');
var ContentItemWrapper = function ContentItemWrapper(_ref) {
  var direction = _ref.direction,
    mountElement = _ref.mountElement,
    drawerStyle = _ref.drawerStyle;
  var viewHandler = useViewHandler();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useDivaCore = useDivaCore(),
    _useDivaCore$actions = _useDivaCore.actions,
    openDrawerMenu = _useDivaCore$actions.openDrawerMenu,
    closeDrawerMenu = _useDivaCore$actions.closeDrawerMenu;
  useEffect(function () {
    if (viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId) {
      setOpen(true);
      var isMobile = viewHandler.getIsInMobileView();
      var onClose = function onClose() {
        closeDrawerMenu('content-item', true);
        viewHandler.settingsState.setContentItemId();
      };
      var basketIds = viewHandler.settingsState.selectedArticles.map(function (article) {
        return article.basketId;
      }).flat();
      var variantValues = viewHandler.divaWebPlanner.getVariantValues(basketIds);
      var initialContext = variantValues.map(function (vv) {
        return {
          featureCodex: vv.OPT.startsWith('OPT') ? vv.OPT.substring(3) : vv.OPT,
          selectedOptions: [vv.OPV]
        };
      });
      var content = /*#__PURE__*/jsx(ContentItemComponent, {
        onClose: onClose,
        contentItemId: viewHandler.settingsState.contentItemId,
        wrapperStyle: {
          display: 'flex',
          flexDirection: 'column'
        },
        headerWrapperStyle: {
          borderTopRightRadius: '8px',
          borderTopLeftRadius: '8px'
        },
        onContentItemLoaded: function onContentItemLoaded(title) {
          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
            id: viewHandler.settingsState.contentItemId,
            title: title !== null && title !== void 0 ? title : undefined
          });
        },
        params: {
          initialContext: initialContext
        },
        onEvent: function onEvent(event) {
          if (event.type == 'applyResults') {
            var _viewHandler$divaWebP;
            var results = event.payload;
            var addOPT = !((_viewHandler$divaWebP = viewHandler.divaWebPlanner.actSet()) !== null && _viewHandler$divaWebP !== void 0 && _viewHandler$divaWebP.CatalogData.isIDMFormat);
            if (addOPT) Object.entries(results).forEach(function (_ref2) {
              var _ref3 = _slicedToArray(_ref2, 2),
                optCodex = _ref3[0],
                optValue = _ref3[1];
              results["OPT".concat(optCodex)] = "OPV".concat(optValue);
            });
            viewHandler.paletteViewHandler.changeOnCheckoutConfig(results, basketIds);
          } else if (event.type == 'onCancel' || event.type == 'onClose') {
            onClose();
          }
        }
      }, viewHandler.settingsState.contentItemId + viewHandler.settingsState.contentItemVisible);
      if (isMobile) {
        var _viewHandler$uiState$;
        openDrawerMenu({
          id: 'content-item',
          content: content,
          onClose: onClose,
          open: true,
          hideCloseButton: true,
          showOverlay: true,
          noModal: false,
          direction: 'bottom',
          mountElement: (_viewHandler$uiState$ = viewHandler.uiState.wrapperRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
          handleInternScroll: true
        });
      } else {
        var _ref4;
        openDrawerMenu({
          id: 'content-item',
          content: content,
          onClose: onClose,
          open: true,
          hideCloseButton: true,
          showOverlay: false,
          noModal: true,
          direction: direction,
          mountElement: (_ref4 = mountElement !== null && mountElement !== void 0 ? mountElement : viewHandler.productState.productElement) !== null && _ref4 !== void 0 ? _ref4 : undefined,
          handleInternScroll: true,
          drawerStyle: _objectSpread(_objectSpread({
            position: 'absolute',
            zIndex: 550,
            maxWidth: 500,
            maxHeight: 600,
            top: 0,
            bottom: 'unset',
            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
          }, direction === 'right' ? {
            borderTopLeftRadius: '16px',
            borderBottomLeftRadius: '16px'
          } : {
            borderTopRightRadius: '16px',
            borderBottomRightRadius: '16px'
          }), drawerStyle),
          wrapperStyle: _objectSpread({
            zIndex: 550,
            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
          }, direction === 'right' ? {
            borderTopLeftRadius: '16px',
            borderBottomLeftRadius: '16px'
          } : {
            borderTopRightRadius: '16px',
            borderBottomRightRadius: '16px'
          })
        });
      }
    } else if (open) {
      closeDrawerMenu('content-item', true);
      setTimeout(function () {
        setOpen(false);
      }, 400);
    }
  }, [viewHandler.settingsState.contentItemVisible, viewHandler.settingsState.contentItemId]);
  return /*#__PURE__*/jsx(Fragment, {});
};
var ContentItemWrapper$1 = observer(ContentItemWrapper);

export { ContentItemWrapper$1 as default };
