import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler, P as PricePreview } from './index-bbdfb97a.js';
import { useState, useEffect } from 'react';
import { useTranslation } from '@crystaldesign/diva-core';
import classnames from 'classnames';
import Collapsible from 'react-collapsible';
import { observer } from 'mobx-react-lite';
import InfoIcon from './index-04a7a9b4.js';
import { g as getKey } from './index-105eab2c.js';
import { jsx, jsxs } 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';
import 'sift';
import './index-0d3bfd91.js';
import './index-2b5bdfe1.js';
import './index-caff71dc.js';
import './index-5cb692e9.js';
import './index.module-d6f043d2.js';
import './index-755074ae.js';
import '@mui/icons-material/Block';
import '@mui/icons-material/Warning';
import './index-db439036.js';
import 'react-dropdown';
import './index-7f2e9c31.js';
import '@babel/runtime/helpers/objectDestructuringEmpty';
import './index-4b3e6bbf.js';
import './index-69271b96.js';
import './index-9a965a68.js';
import '@crystaldesign/content-box';
import './index-e9a81262.js';
import './index-2f37b9f2.js';
import './index-bea5c228.js';
import './index-014a5003.js';
import 'swiper/react';
import 'swiper/modules';
import './UnlockCard-575022e0.js';
import './index-ce21cd4d.js';
import './index-6a697eea.js';
import './index-ea5e3e90.js';
import './index-69fd5e9e.js';
import './index-079ef135.js';
import './index-4b48794b.js';
import 'react-laag';
import './index.module-25687dd9.js';
import './index-3f40a92d.js';
import './index-66fd1759.js';
import './index-8a330776.js';
import './index-4fda4c71.js';
import './index-d896efe9.js';
import './index.module-fe49e10f.js';
import './index-6051ac01.js';
import './index-ec31a7cb.js';
import './index-79fbb400.js';
import './index-2e39dac3.js';
import './index-1641324b.js';
import './index-7635bafb.js';
import './index-0e0e6ac6.js';
import './index-a1cef81d.js';
import './index-4c03ac5c.js';
import './index-10d8be2f.js';
import './index-b7364bb1.js';
import './index-a253bbbf.js';
import './index-4ca1affe.js';
import 'rc-slider';
import './index-c44088dc.js';
import './index-e4d1ba18.js';
import './index-d5bb9bda.js';
import './index-dd2aabd2.js';
import './index-eb98a8c6.js';
import 'react-confetti-explosion';
import './index-d0331808.js';
import './index-7167c5bc.js';
import './index-5a146745.js';
import 'react-qr-code';
import './index-c648d661.js';
import './useCustomDimensions-8be02680.js';
import './index-c0a41b5b.js';
import './ussIsSticky-2f6bc37b.js';
import './index-290c519e.js';
import './index-be7a52a8.js';
import './index-9c4f9dc2.js';
import './index.module-613d19d3.js';
import './index-23081351.js';
import './index-b14a4a7c.js';
import './index-fdf81349.js';
import './index-688fe1aa.js';

var wrapper = "wrapper-QG-9Z";
var wcGroupedContainer = "wcGroupedContainer-jhNWc";
var open = "open-tiFs0";
var wcPaletteHeader = "wcPaletteHeader-TmsT4";
var wcSizeGroupHeader = "wcSizeGroupHeader-40Cqv";
var wcGroupHeaderTitle = "wcGroupHeaderTitle-5oMvI";
var mobile = "mobile-CMV-0";
var tablet = "tablet-JUtBt";
var wcFoldingArrow = "wcFoldingArrow-DFXd-";
var wcGroupOpen = "wcGroupOpen-6Lf4-";
var css_248z = ".wrapper-QG-9Z {\n  width: 100%;\n}\n\n.wrapper-QG-9Z {\n  width: 100%;\n}\n\n.wrapper-QG-9Z:last-child {\n  margin-bottom: 20px;\n}\n\n.wcConfigurator-settings-j6rpE .wcGroupedContainer-jhNWc {\n  transition: all 0.35s ease;\n  box-sizing: content-box;\n  overflow: visible;\n  display: inline-block;\n  width: 100%;\n}\n\n.open-tiFs0 .Collapsible__contentOuter {\n  overflow: visible !important;\n}\n\n.wcPaletteHeader-TmsT4.wcSizeGroupHeader-40Cqv {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.wcPaletteHeader-TmsT4.wcSizeGroupHeader-40Cqv {\n  width: 98%;\n  height: 34px;\n  border-bottom: 1px solid #dfdfdf;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  margin-left: 1%;\n  margin-right: 1%;\n  align-items: center;\n}\n.wcPaletteHeader-TmsT4.wcSizeGroupHeader-40Cqv:hover {\n  z-index: 200;\n}\n\n.wcGroupHeaderTitle-5oMvI {\n  font-size: 15px;\n  font-weight: 200;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  -webkit-text-stroke: 0.4px;\n  width: calc(100% - 32px);\n  padding-top: 6px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n}\n\n.mobile-CMV-0:not(.tablet-JUtBt) .wcPaletteHeader-TmsT4.wcSizeGroupHeader-40Cqv {\n  height: 24px;\n}\n\n.mobile-CMV-0:not(.tablet-JUtBt) .wcGroupHeaderTitle-5oMvI {\n  font-size: 13px;\n}\n\n.wcGroupHeaderTitle-5oMvI:hover {\n  z-index: 200;\n}\n\n.wcPaletteHeader-TmsT4 .wcFoldingArrow-DFXd- {\n  margin: 0px 6px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  transform: rotateZ(0deg);\n  transition: all 0.35s ease;\n  width: 20.8px;\n  height: 22.4px;\n}\n\n.mobile-CMV-0:not(.tablet-JUtBt) .wcPaletteHeader-TmsT4 .wcFoldingArrow-DFXd- {\n  width: 16px;\n  height: 16px;\n  margin-top: 4px;\n}\n\n.wcGroupOpen-6Lf4- .wcPaletteHeader-TmsT4 .wcFoldingArrow-DFXd- {\n  transform: rotateZ(180deg);\n}\n";
styleInject(css_248z);

var Group = function Group(_ref) {
  var group = _ref.group,
    PaletteComponent = _ref.PaletteComponent,
    itemPalette = _ref.itemPalette,
    contentInnerClassName = _ref.contentInnerClassName;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var viewHandler = useViewHandler();
  var _useState = useState(group.isFolded),
    _useState2 = _slicedToArray(_useState, 2),
    contentHidden = _useState2[0],
    setContentHidden = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    contentVisible = _useState4[0],
    setContentVisible = _useState4[1];
  var _useState5 = useState(!group.isFolded),
    _useState6 = _slicedToArray(_useState5, 2),
    isOpen = _useState6[0],
    setIsOpen = _useState6[1];
  useEffect(function () {
    if (!isOpen && !group.isFolded) {
      setTimeout(function () {
        return setIsOpen(!group.isFolded);
      }, 400);
    } else {
      setIsOpen(!group.isFolded);
    }
    if (!contentHidden && group.isFolded) {
      setTimeout(function () {
        return setContentHidden(group.isFolded);
      }, 200);
    } else {
      setContentHidden(group.isFolded);
    }
    if (group.isFolded) {
      setContentVisible(false);
    } else {
      setTimeout(function () {
        return setContentVisible(true);
      }, 800);
    }
  }, [group.isFolded]);
  var name = group.name !== 'none' ? group.name : t('configurator.other');
  var title = name + (group.parentName && group.parentName != itemPalette.name ? ' (' + group.parentName + ')' : '');
  var pricePreviewPromise = group.items[0].pricePreviewPromise;
  return /*#__PURE__*/jsx("div", {
    className: classnames(wrapper, contentVisible ? open : undefined, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
    id: title,
    children: /*#__PURE__*/jsx(Collapsible, {
      className: wcGroupedContainer,
      open: isOpen,
      contentInnerClassName: contentInnerClassName,
      handleTriggerClick: function handleTriggerClick() {
        if (group.isFolded) viewHandler.settingsState.openGroup(itemPalette.id, group.key, viewHandler.paletteViewHandler.isGroupFolded(itemPalette.id));else {
          viewHandler.settingsState.closeGroup(itemPalette.id, group.key);
        }
      },
      triggerOpenedClassName: wcGroupOpen,
      trigger: /*#__PURE__*/jsxs("div", {
        className: classnames(wcPaletteHeader, wcSizeGroupHeader),
        children: [/*#__PURE__*/jsx("div", {
          className: wcFoldingArrow
        }), group.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
          item: group,
          style: {
            zIndex: 100,
            margin: '0px 10px',
            position: 'relative'
          }
        }, group.key), /*#__PURE__*/jsxs("div", {
          className: wcGroupHeaderTitle,
          children: [title, pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
            asyncPricePreview: pricePreviewPromise
          })]
        })]
      }),
      easing: "ease",
      children: !contentHidden && group.items.map(function (item, i) {
        return /*#__PURE__*/jsx(PaletteComponent, {
          paletteType: itemPalette.type,
          paletteId: itemPalette.id,
          item: item,
          hidePricePreview: true
        }, getKey(item));
      })
    })
  }, title);
};
var Group$1 = observer(Group);

export { Group$1 as default };
