import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import 'react';
import RoomRound from './index-56d11b8e.js';
import classnames from 'classnames';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
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 roomItem = "roomItem-Uuc6r";
var roomItemSel = "roomItem-sel-ePWgY";
var mobile = "mobile-gsjDz";
var selectionWrapper = "selectionWrapper-osHpS";
var roomItemContainer = "roomItem-container-3jH8Z";
var viewItemContainer = "viewItem-container-OlPAR";
var tablet = "tablet--t8lH";
var css_248z = ".roomItem-Uuc6r {\n  width: 70px;\n  height: 70px;\n  background-color: #fff;\n  opacity: 0.8;\n  background-repeat: no-repeat;\n  background-position: center;\n  border-radius: 50%;\n  background-size: 62%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2242%22 height%3D%2235%22 viewBox%3D%220 0 42 35%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.6329 26.5973L1 33.4896V1.48962L11.6329 4.93578M11.6329 26.5973V4.93578M11.6329 26.5973H21.2532M11.6329 4.93578H41V26.5973H30.3671M21.2532 26.5973V11.8281H30.3671V26.5973M21.2532 26.5973H30.3671%22 stroke%3D%22%234A4543%22 stroke-width%3D%223%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-color 0.2s ease-in-out;\n  opacity: 0.8;\n  border: 1px solid #ddd;\n  position: absolute;\n  left: 29px;\n}\n.roomItem-sel-ePWgY {\n  background-color: rgba(217,217,217,0.66667);\n}\n.mobile-gsjDz.roomItem-Uuc6r {\n  width: 32px;\n  height: 32px;\n  display: block;\n  position: relative;\n  left: auto;\n  left: initial;\n  bottom: auto;\n  bottom: initial;\n}\n\n.selectionWrapper-osHpS {\n  position: relative;\n  overflow: visible;\n  width: 100%;\n  height: 100%;\n}\n\n.roomItem-container-3jH8Z {\n  position: absolute;\n  bottom: 74px;\n  left: 0px;\n  z-index: 700;\n  min-width: 300px;\n  overflow-y: auto;\n  overflow-x: visible;\n  /*hide scrollbar*/\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n.roomItem-container-3jH8Z::-webkit-scrollbar {\n  display: none;\n}\n\n.viewItem-container-OlPAR {\n  position: absolute;\n  display: flex;\n  bottom: -2px;\n  left: 86px;\n  z-index: 700;\n  flex-direction: row;\n  overflow-y: visible;\n  overflow-x: auto;\n}\n\n.mobile-gsjDz.roomItem-container-3jH8Z {\n  bottom: 38px;\n  left: -6px;\n}\n\n.tablet--t8lH.roomItem-container-3jH8Z {\n  bottom: 52px;\n  left: -2px;\n}\n\n.mobile-gsjDz.viewItem-container-OlPAR {\n  display: none;\n}\n";
styleInject(css_248z);

var RoomListSelection = function RoomListSelection(_ref) {
  var _viewHandler$productS;
  var style = _ref.style;
  var viewHandler = useViewHandler();
  var rooms = viewHandler.paletteViewHandler.getRoomList();
  var views = viewHandler.paletteViewHandler.getRoomViewList();
  if (!viewHandler.uiState.ViewConfig.roomListInProduct || !viewHandler.settingsState.roomListInitialized || !viewHandler.productState.doShowRenderImage && !viewHandler.productState.doShow3DComb || viewHandler.settingsState.infoBoxContent || viewHandler.uiState.isMobileLandscape) return /*#__PURE__*/jsx(Fragment, {});
  var divSize = (_viewHandler$productS = viewHandler.productState.planner3DImageSvgArea) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.getBoundingClientRect();
  var stopPropagation = function stopPropagation(e) {
    e.stopPropagation();
  };
  return /*#__PURE__*/jsx(Fragment, {
    children: /*#__PURE__*/jsx("div", {
      id: "room-list-selection",
      "data-test-id": "room-list-selection",
      className: classnames(roomItem, viewHandler.productState.roomListExpanded ? roomItemSel : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
      onClick: function onClick() {
        viewHandler.productState.setRoomListExpanded(!viewHandler.productState.roomListExpanded);
      },
      onMouseDown: stopPropagation,
      onTouchStart: stopPropagation,
      style: style,
      children: viewHandler.productState.roomListExpanded && /*#__PURE__*/jsxs("div", {
        className: selectionWrapper,
        children: [/*#__PURE__*/jsx("div", {
          "data-test-id": "room-selection-expanded",
          id: "views-selection-expanded",
          style: {
            maxHeight: 'calc(' + (divSize === null || divSize === void 0 ? void 0 : divSize.height) + 'px - 80px)'
          },
          className: classnames(roomItemContainer, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
          children: rooms.map(function (item) {
            return /*#__PURE__*/jsx(RoomRound, {
              item: item,
              from: viewHandler.settingsState.roomListInitialized
            }, item.codex);
          })
        }), /*#__PURE__*/jsx("div", {
          id: "rooms-selection-expanded",
          style: {
            maxWidth: 'calc(' + (divSize === null || divSize === void 0 ? void 0 : divSize.width) + 'px - 100px)'
          },
          className: classnames(viewItemContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
          children: views.map(function (item) {
            return /*#__PURE__*/jsx(RoomRound, {
              item: item,
              from: viewHandler.settingsState.roomListInitialized,
              isVP: true
            }, item.codex);
          })
        })]
      })
    })
  });
};
var index = observer(RoomListSelection);

export { index as default };
