import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-bbdfb97a.js';
import { useDivaCore } from '@crystaldesign/diva-core';
import { useRef, useCallback, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { ContentBoxComponent } from '@crystaldesign/content-box';
import classnames from 'classnames';
import { jsxs, Fragment, jsx } 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 productsGrid = "products-grid-b9XWQ";
var productsGridDisabled = "products-grid-disabled-1BegM";
var skeleton = "skeleton-XdjqR";
var css_248z = ".products-grid-b9XWQ {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: 10px;\n  height: 100%;\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n\n.products-grid-disabled-1BegM {\n  pointer-events: none;\n}\n\n.mobile .products-grid-b9XWQ {\n  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n}\n\n.skeleton-XdjqR {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  color: var(--primaryColor);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 22px;\n  box-shadow: rgba(0, 0, 0,0.1) 0px 0px 16px 0px;\n}\n";
styleInject(css_248z);

var PromotedProducts = function PromotedProducts(_ref) {
  var _viewHandler$configSt, _settingsState$promot, _viewHandler$divaWebP;
  var item = _ref.item;
  var _useDivaCore = useDivaCore(),
    openComponent = _useDivaCore.actions.openComponent,
    productHandler = _useDivaCore.handler.productHandler,
    _useDivaCore$state = _useDivaCore.state,
    organization = _useDivaCore$state.organization,
    hidePrices = _useDivaCore$state.hidePrices;
  var viewHandler = useViewHandler();
  var settingsState = viewHandler.settingsState;
  var productsConfig = viewHandler.getViewConfig().productsConfig;
  var isOpeningProductRef = useRef(false);
  var didStartLoadingRef = useRef(false);
  var onAddProduct = useCallback(function (productId) {
    if (viewHandler.uiState.isLogicLoading || settingsState.promotedOptimisticProductId != null || isOpeningProductRef.current) return;
    isOpeningProductRef.current = true;
    didStartLoadingRef.current = false;
    settingsState.setPromotedOptimisticProductId(productId);
    openComponent({
      type: 'DIVA_WEBPLANNER',
      parameters: {
        productId: productId
      },
      internal: {
        forceReload: '1',
        keepCache: '1'
      }
    });
  }, [openComponent, settingsState, viewHandler.uiState]);
  var configProductId = (_viewHandler$configSt = viewHandler.configState.productId) !== null && _viewHandler$configSt !== void 0 ? _viewHandler$configSt : !viewHandler.configState.divaNr && viewHandler.divaWebPlanner.getStartProductId();
  var selectedProduct = (_settingsState$promot = settingsState.promotedOptimisticProductId) !== null && _settingsState$promot !== void 0 ? _settingsState$promot : configProductId;
  useEffect(function () {
    if (!isOpeningProductRef.current) return;
    if (viewHandler.uiState.isLogicLoading) {
      didStartLoadingRef.current = true;
      return;
    }
    if (didStartLoadingRef.current) {
      isOpeningProductRef.current = false;
      didStartLoadingRef.current = false;
      settingsState.setPromotedOptimisticProductId(null);
    }
  }, [settingsState, viewHandler.uiState.isLogicLoading]);
  useEffect(function () {
    settingsState.setPromotedOptimisticProductId(null);
  }, [organization._id, settingsState]);
  var catalogCodex = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getCatalogData()) === null || _viewHandler$divaWebP === void 0 ? void 0 : _viewHandler$divaWebP.catalogCodex;
  useEffect(function () {
    var _viewHandler$divaWebP2;
    if (viewHandler.uiState.isLogicLoading) return;
    settingsState.loadPromotedProducts(productHandler, organization._id, catalogCodex, (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner) === null || _viewHandler$divaWebP2 === void 0 ? void 0 : _viewHandler$divaWebP2.getCurPlannerType(), productsConfig);
  }, [organization._id, viewHandler.uiState.isLogicLoading, catalogCodex]);
  var groups = settingsState.promotedGroups;
  var skeletons = productsConfig !== null && productsConfig !== void 0 && productsConfig.maxCount && productsConfig.showSkeletions ? getSkeletons(productsConfig.maxCount, groups.length) : [];
  var areProductsDisabled = viewHandler.uiState.isLogicLoading || settingsState.promotedOptimisticProductId != null || isOpeningProductRef.current;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(SettingsHeader, {
      isInScroller: false,
      isSettingsHeader: true,
      item: item
    }), /*#__PURE__*/jsxs("div", {
      className: classnames(productsGrid, areProductsDisabled ? productsGridDisabled : undefined),
      "aria-disabled": areProductsDisabled,
      children: [groups.map(function (group, i) {
        var _ref2;
        return /*#__PURE__*/jsx(ContentBoxComponent, {
          settings: {
            contentBoxProps: {
              type: 'ProductGallery',
              products: group.items,
              groupVariantsByField: ['dc_color', 'dc_mainColor'],
              onClick: onAddProduct,
              imageWrapperStyle: {
                aspectRatio: 'unset'
              },
              wrapperStyle: group.items.find(function (i) {
                return i._id == selectedProduct;
              }) ? {
                border: '1px solid var(--diva-theme-palette-primary-main)',
                borderRadius: '5px'
              } : undefined,
              imageStyle: {
                aspectRatio: '14.5 / 10',
                objectFit: 'scale-down',
                objectPosition: 'bottom'
              },
              hidePrices: (_ref2 = hidePrices || viewHandler.getViewConfig().promotedHidePrices) !== null && _ref2 !== void 0 ? _ref2 : false
            }
          }
        }, group._id);
      }), skeletons.map(function (index) {
        return /*#__PURE__*/jsx("div", {
          className: skeleton,
          children: /*#__PURE__*/jsx("div", {
            children: index
          })
        }, index);
      })]
    })]
  });
};
var getSkeletons = function getSkeletons(maxCount, itemsCount) {
  var skeletonsCount = 0;
  if (maxCount > itemsCount) {
    skeletonsCount = maxCount - itemsCount;
  }
  var skeletons = [];
  if (skeletonsCount) {
    for (var i = skeletonsCount - 1; i >= 0; i--) {
      skeletons.push(maxCount - i);
    }
  }
  return skeletons;
};
var PromotedProducts$1 = observer(PromotedProducts);

export { PromotedProducts$1 as default };
