import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-bbdfb97a.js';
import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
import { useState, useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
import classnames from 'classnames';
import Search from './index-36d078ea.js';
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/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 pdpOverlay = "pdp-overlay-2gWQq";
var navigationVisible = "navigation-visible-goqGH";
var pdpBackground = "pdp-background-1tl-9";
var pdpContainer = "pdp-container-EljBO";
var isMobileClass = "is-mobile-class-eOYXj";
var closeButton = "close-button-tHReC";
var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  position: relative;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n\n.close-button-tHReC {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n  z-index: 100;\n}\n.close-button-tHReC:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n";
styleInject(css_248z);

var ProductList = function ProductList(_ref) {
  var _viewHandler$settings, _viewHandler$getViewC;
  var item = _ref.item;
  var _useDivaCore = useDivaCore();
    _useDivaCore.actions.openComponent;
    var _useDivaCore$state = _useDivaCore.state,
    HeaderElement = _useDivaCore$state.headerInfos.HeaderElement,
    _useDivaCore$state$di = _useDivaCore$state.dimensions,
    isMobile = _useDivaCore$state$di.isMobile,
    height = _useDivaCore$state$di.height,
    isPortrait = _useDivaCore$state$di.isPortrait,
    organization = _useDivaCore$state.organization;
  var _useTranslation = useTranslation();
    _useTranslation.t;
  var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
  var currentlyMobile = isMobile && isPortrait || height < 500;
  var viewHandler = useViewHandler();
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    currentProductId = _useState2[0],
    setCurrentProductId = _useState2[1];
  var productState = useProductState({
    parameters: {
      'customFlags.variantsList.organizations': organization._id
    },
    sort: '{-created}',
    scroller: (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : undefined
  });
  var closePDP = useCallback(function () {
    setCurrentProductId(undefined);
  }, []);
  var openPDP = useCallback(function (_ref2) {
    var _id = _ref2._id;
    setCurrentProductId(_id);
  }, []);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(SettingsHeader, {
      isInScroller: false,
      isSettingsHeader: true,
      item: item,
      specialElement1: /*#__PURE__*/jsx(Search, {
        searchState: productState.search
      })
    }), viewHandler.settingsState.settingsScrollerElement && /*#__PURE__*/jsx(ProductsComponent, {
      productState: productState,
      onClickFunction: openPDP
    }), currentProductId && /*#__PURE__*/jsxs("div", {
      className: classnames(pdpOverlay, currentlyMobile ? isMobileClass : undefined, !!portalHeaderHeight ? navigationVisible : undefined),
      children: [!currentlyMobile && /*#__PURE__*/jsx("div", {
        onClick: closePDP,
        className: pdpBackground
      }), /*#__PURE__*/jsxs("div", {
        className: pdpContainer,
        children: [/*#__PURE__*/jsx("div", {
          onClick: closePDP,
          className: closeButton
        }), /*#__PURE__*/jsx(ProductDetailPageComponent, {
          settings: (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.productDetailPageConfig,
          productId: currentProductId
        })]
      })]
    })]
  });
};
var index = observer(ProductList);

export { index as default };
