import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Grid } from 'swiper/modules';
import RoomItem from './index-9c4f9dc2.js';
import classnames from 'classnames';
import InfoBanner from './index-23081351.js';
import UploadItem from './index-b14a4a7c.js';
import CustomInput from './index-fdf81349.js';
import { jsxs, jsx, Fragment } 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/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';
import './index.module-613d19d3.js';
import './index-04a7a9b4.js';
import '@babel/runtime/helpers/objectDestructuringEmpty';

var roomGallery = "room-gallery-6uX3f";
var roomFilter = "room-filter--61x0";
var roomFilterSwiper = "room-filter-swiper-sgtL0";
var css_248z = ".room-gallery-6uX3f {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 16px;\n  justify-content: center;\n  align-items: center;\n  background: linear-gradient(to right, #b7cbdc, #e9eff3);\n  background: var(--roomGalleryBackground, linear-gradient(to right, #b7cbdc, #e9eff3));\n  padding: 16px;\n  border-radius: 12px;\n  border: 1px solid #e0e0e0;\n}\n\n.room-filter--61x0.room-filter-swiper-sgtL0 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 4px;\n}\n\n/*grid css*/\n\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-grid > .swiper-wrapper {\n  flex-wrap: wrap;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-grid-column > .swiper-wrapper {\n  flex-wrap: wrap;\n  flex-direction: column;\n  max-height: 198px;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n  width: 100%;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-vertical.swiper {\n  width: 100%;\n}\n\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-android .swiper-slide,\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-vertical .swiper-slide {\n  height: auto;\n}\n\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-autoheight,\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .room-filter--61x0.room-filter-swiper-sgtL0 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .room-filter--61x0.room-filter-swiper-sgtL0 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.room-filter--61x0.room-filter-swiper-sgtL0 .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
styleInject(css_248z);

var RoomGallery = function RoomGallery(_ref) {
  var roomItems = _ref.roomItems,
    selectedRoom = _ref.selectedRoom;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    swiperRef = _useState2[0],
    setSwiperRef = _useState2[1];
  var viewHandler = useViewHandler();
  var navigateToOnClick = function navigateToOnClick(index) {
    swiperRef === null || swiperRef === void 0 || swiperRef.slideTo(index);
  };
  var timeframeLimitReachedOverOneDay = viewHandler.aiState.isTimeframeLimitReached && viewHandler.aiState.isTimeframeLimitReached !== 'daily';
  return /*#__PURE__*/jsxs("div", {
    className: roomGallery,
    children: [/*#__PURE__*/jsx(InfoBanner, {}), !timeframeLimitReachedOverOneDay && /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("div", {
        className: classnames(roomFilterSwiper, roomFilter),
        children: /*#__PURE__*/jsx(Swiper, {
          onSwiper: setSwiperRef,
          resizeObserver: true,
          modules: [Navigation, Grid],
          spaceBetween: viewHandler.uiState.isInMobileView ? 4 : 8,
          scrollbar: true,
          slideToClickedSlide: true,
          wrapperClass: "no-swiping",
          slidesPerView: 3,
          style: {
            marginTop: '16px'
          },
          grid: {
            rows: 2
          },
          children: roomItems.map(function (e, index) {
            return /*#__PURE__*/jsx(SwiperSlide, {
              onClick: function onClick(e) {
                var clickRow = (index - index % 2) / 2;
                var rowToNavigateTo = clickRow - 1;
                navigateToOnClick(rowToNavigateTo >= 0 ? rowToNavigateTo : 0);
                e.stopPropagation();
              },
              children: e.uploadItem ? /*#__PURE__*/jsx(UploadItem, {
                item: e
              }, e.key) : /*#__PURE__*/jsx(RoomItem, {
                item: e
              }, e.key)
            }, index);
          })
        })
      }), /*#__PURE__*/jsx(CustomInput, {
        selectedRoom: selectedRoom
      })]
    })]
  });
};
var RoomGallery$1 = observer(RoomGallery);

export { RoomGallery$1 as default };
