import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import 'react';
import { useTranslation } from '@crystaldesign/diva-core';
import { jsxs, 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 paletteItem = "palette-item-SQlml";
var imageWrapper = "imageWrapper-rcOF5";
var sel = "sel-1986q";
var imageBackground = "imageBackground-SUtlD";
var wcImage = "wcImage-XUaTv";
var title = "title-Cr0ha";
var mobile = "mobile-NUDZR";
var titleSel = "title-sel-8BT-F";
var css_248z = "/*Size Normal */\n\n.palette-item-SQlml {\n  pointer-events: all;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: -moz-min-content;\n  width: min-content;\n  height: 70px;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  margin-bottom: 2px;\n}\n\n.palette-item-SQlml:active {\n  z-index: 200;\n}\n.palette-item-SQlml:hover {\n  z-index: 200;\n}\n\n.imageWrapper-rcOF5 {\n  border-radius: 50%;\n  border: 1px transparent solid;\n  width: 68px;\n  height: 68px;\n  transition: border-color 0.3s ease;\n\n  border-style: double;\n}\n\n.sel-1986q .imageWrapper-rcOF5,\n.small-oHSfx.sel-1986q .imageWrapper-rcOF5 {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.imageWrapper-rcOF5:hover {\n  border: 1px var(--primaryColor) solid;\n}\n\n.sel-1986q .imageWrapper-rcOF5 {\n  border: 1px transparent solid !important;\n}\n\n.imageBackground-SUtlD {\n  border-radius: 50%;\n  border: 4px white solid;\n  width: 60px;\n  height: 60px;\n  transition: 0.15s ease;\n}\n\n.sel-1986q .imageBackground-SUtlD {\n  border: 4px var(--primaryColor) solid;\n}\n\n.wcImage-XUaTv {\n  width: 100%;\n  height: 60px;\n  border-radius: 50%;\n  background-size: cover;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.title-Cr0ha {\n  text-align: center;\n  margin: 16px;\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 24px;\n  z-index: 400;\n  font-weight: 600;\n  color: var(--secondaryColor);\n  font-family: var(--diva-typography-font-family);\n  margin-left: 12px;\n  text-align: left;\n  white-space: nowrap;\n  background-color: #eee;\n  border-radius: 70px;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  pointer-events: none;\n}\n\n.palette-item-SQlml:not(.mobile-NUDZR):hover .title-Cr0ha,\n.title-sel-8BT-F {\n  opacity: 1;\n  pointer-events: all;\n}\n\n.mobile-NUDZR.palette-item-SQlml {\n  width: 45px;\n  height: 45px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  margin-right: 12px;\n}\n.mobile-NUDZR .imageWrapper-rcOF5 {\n  width: 43px;\n  height: 43px;\n}\n\n.mobile-NUDZR .imageBackground-SUtlD {\n  width: 39px;\n  height: 39px;\n  border-width: 2px;\n}\n\n.mobile-NUDZR .wcImage-XUaTv {\n  height: 39px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  line-height: 2px;\n  font-size: 12px;\n  padding: 14px;\n  margin: 8px;\n}\n\n/* \n@media all and (max-width: 1800px) {\n  .palette-item {\n    width: 81px;\n    height: 81px;\n  }\n  .imageWrapper {\n    width: 79px;\n    height: 79px;\n  }\n  .imageBackground {\n    width: 71px;\n    height: 71px;\n  }\n  .wcImage {\n    height: 71px;\n  }\n  .title {\n    line-height: 81px;\n    font-size: 12px;\n  } \n}\n*/\n";
styleInject(css_248z);

var Room = function Room(_ref) {
  var itemP = _ref.item,
    from = _ref.from,
    isVP = _ref.isVP;
  var item = itemP;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var onClick = function onClick(e) {
    viewHandler.productState.setRoomListExpanded(true); //reset the timeout
    if (isVP) {
      viewHandler.paletteViewHandler.clickedOnStaticVPPalette(item, !!from);
    } else {
      viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
    }
  };
  var stopPropagation = function stopPropagation(e) {
    e.stopPropagation();
  };
  return /*#__PURE__*/jsxs("div", {
    onMouseDown: stopPropagation,
    onTouchStart: stopPropagation,
    onClick: onClick,
    className: classnames(paletteItem, viewHandler.uiState.isInMobileView ? mobile : undefined),
    children: [/*#__PURE__*/jsx("div", {
      className: classnames(item.sel ? sel : undefined),
      children: /*#__PURE__*/jsx("div", {
        className: classnames(imageWrapper),
        children: /*#__PURE__*/jsx("div", {
          className: classnames(imageBackground),
          children: /*#__PURE__*/jsx("div", {
            "data-test-id": "select-room",
            className: wcImage,
            style: {
              backgroundImage: "url(".concat(item.url, ")")
            }
          })
        })
      })
    }), !isVP && /*#__PURE__*/jsx("div", {
      onClick: function onClick(e) {
        return e.stopPropagation();
      },
      className: classnames(item.sel ? titleSel : undefined, title),
      children: t('configurator.' + item.N)
    })]
  });
};
var RoomRound = observer(Room);

export { RoomRound as default };
