import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useState, useEffect } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
import { useTranslation } from '@crystaldesign/diva-core';
import { c as container, e as emptyText, h as headline, s as sceneHistory, a as sceneHistoryTitle, b as sceneHistorySwiper, d as sceneThumbPlaceholder, f as sceneThumbPlaceholderSelected, g as sceneThumbPlaceholderImage, i as sceneThumbLabel, j as sceneThumbPlaceholderIcon, k as sceneThumbSpinnerOverlay, l as sceneThumbSpinner, m as sceneThumb, n as sceneThumbSelected, o as subheadline, p as mainImageCard, q as mainImage, r as mainImageOverlay, t as mainImageTitle, u as mainImageDescription, v as styleSelection, w as styleButtonsSwiper, x as styleButton, y as styleButtonSelected, z as styleButtonImage, A as styleButtonLabel, B as generateSection, C as generateButton, D as generateButtonSubtext, E as errorMessage, F as remainingText, U as UnlockCard, G as customInputSection, H as styleDescriptionText, I as customInput, J as promptExamplesSwiper, K as promptExampleChip, L as tryVariantLink } from './UnlockCard-575022e0.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@babel/runtime/helpers/objectWithoutProperties';
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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var StyleConsultant = function StyleConsultant(_ref) {
  var _viewHandler$getViewC, _aiState$enrichedAiRo, _roomItems$find, _budget$remaining, _viewHandler$settings, _viewHandler$settings2, _viewHandler$getViewC2, _viewHandler$getViewC3, _aiState$aiGeneration, _selectedItem$key, _budget$isLimitReache, _budget$total, _budget$leadKeyActive, _aiState$customPrompt;
  _ref.item;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var viewHandler = useViewHandler();
  var aiState = viewHandler.aiState;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    keepUnlockVisible = _useState2[0],
    setKeepUnlockVisible = _useState2[1];
  var _useState3 = useState(null),
    _useState4 = _slicedToArray(_useState3, 2),
    styleSwiperRef = _useState4[0],
    setStyleSwiperRef = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    placeholderSelected = _useState6[0],
    setPlaceholderSelected = _useState6[1];
  if (!((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.showStyleConsultant) || !((_aiState$enrichedAiRo = aiState.enrichedAiRoomRenderings()) !== null && _aiState$enrichedAiRo !== void 0 && _aiState$enrichedAiRo.length)) {
    return /*#__PURE__*/jsx("div", {
      className: container,
      children: /*#__PURE__*/jsx("p", {
        className: emptyText,
        children: t('configurator.roomRendering.noStylesAvailable', 'Keine Stilwelten verfügbar.')
      })
    });
  }
  var roomItems = aiState.enrichedAiRoomRenderings();
  var selectedItem = (_roomItems$find = roomItems.find(function (r) {
    return r.key === aiState.selectedRoom;
  })) !== null && _roomItems$find !== void 0 ? _roomItems$find : roomItems[0];
  var budget = aiState.usageBudget;
  var scenesRemaining = (_budget$remaining = budget === null || budget === void 0 ? void 0 : budget.remaining) !== null && _budget$remaining !== void 0 ? _budget$remaining : 0;
  var leadBonus = (_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.organizationAISettings) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.leadRewardBonus) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0;
  var promptExamples = ((_viewHandler$getViewC2 = (_viewHandler$getViewC3 = viewHandler.getViewConfig()) === null || _viewHandler$getViewC3 === void 0 ? void 0 : _viewHandler$getViewC3.aiPromptExamples) !== null && _viewHandler$getViewC2 !== void 0 ? _viewHandler$getViewC2 : []).map(function (key) {
    return t(key);
  });
  var generatedImages = aiState.generatedImageHistory;
  var generationErrorKey = (_aiState$aiGeneration = aiState.aiGenerationErrors[(_selectedItem$key = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) !== null && _selectedItem$key !== void 0 ? _selectedItem$key : '']) === null || _aiState$aiGeneration === void 0 ? void 0 : _aiState$aiGeneration[aiState.setHash];
  var hasImageForCurrentPrompt = generatedImages.some(function (e) {
    return e.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && e.hash === aiState.setHash && (e.customPrompt || '') === (aiState.customPromptInput || '');
  });
  useEffect(function () {
    setPlaceholderSelected(false);
  }, [generatedImages.length]);
  return /*#__PURE__*/jsxs("div", {
    className: container,
    children: [/*#__PURE__*/jsx("h1", {
      className: headline,
      children: t('configurator.inspiration.headline')
    }), generatedImages.length > 0 ? /*#__PURE__*/jsxs("div", {
      className: sceneHistory,
      children: [/*#__PURE__*/jsx("h4", {
        className: sceneHistoryTitle,
        children: t('configurator.inspiration.sceneHistory')
      }), /*#__PURE__*/jsx("div", {
        className: sceneHistorySwiper,
        children: /*#__PURE__*/jsxs(Swiper, {
          modules: [Navigation],
          spaceBetween: 8,
          slidesPerView: "auto",
          navigation: true,
          wrapperClass: "no-swiping",
          resizeObserver: true,
          children: [/*#__PURE__*/jsx(SwiperSlide, {
            onClick: function onClick() {
              if (aiState.isAnyGenerationInProgress) aiState.focusLoadingSlide();
            },
            children: /*#__PURE__*/jsxs("div", {
              className: "".concat(sceneThumbPlaceholder, " ").concat(placeholderSelected || aiState.isLoadingSlideActive ? sceneThumbPlaceholderSelected : ''),
              children: [placeholderSelected && selectedItem !== null && selectedItem !== void 0 && selectedItem.image ? /*#__PURE__*/jsxs(Fragment, {
                children: [/*#__PURE__*/jsx("img", {
                  src: selectedItem.image,
                  alt: selectedItem.name,
                  className: sceneThumbPlaceholderImage
                }), selectedItem.name && /*#__PURE__*/jsx("span", {
                  className: sceneThumbLabel,
                  children: selectedItem.name
                })]
              }) : /*#__PURE__*/jsx("span", {
                className: sceneThumbPlaceholderIcon,
                children: "\u2728"
              }), aiState.isAnyGenerationInProgress && /*#__PURE__*/jsx("div", {
                className: sceneThumbSpinnerOverlay,
                children: /*#__PURE__*/jsx("span", {
                  className: sceneThumbSpinner
                })
              })]
            })
          }, "placeholder"), generatedImages.map(function (entry, idx) {
            var _roomItems$find2, _aiState$currentlyVis;
            var styleName = (_roomItems$find2 = roomItems.find(function (r) {
              return r.key === entry.key;
            })) === null || _roomItems$find2 === void 0 ? void 0 : _roomItems$find2.name;
            var isActive = !placeholderSelected && !aiState.isLoadingSlideActive && ((_aiState$currentlyVis = aiState.currentlyVisibleRoom) === null || _aiState$currentlyVis === void 0 ? void 0 : _aiState$currentlyVis.src) === entry.src;
            return /*#__PURE__*/jsx(SwiperSlide, {
              onClick: function onClick() {
                setPlaceholderSelected(false);
                aiState.useAiGeneratedRoom(entry.key, entry.hash, false, entry.src);
              },
              children: /*#__PURE__*/jsxs("div", {
                className: "".concat(sceneThumb, " ").concat(isActive ? sceneThumbSelected : ''),
                children: [/*#__PURE__*/jsx("img", {
                  src: entry.src
                }), styleName && /*#__PURE__*/jsx("span", {
                  className: sceneThumbLabel,
                  children: styleName
                })]
              })
            }, "".concat(entry.key, "-").concat(entry.hash, "-").concat(idx));
          })]
        })
      })]
    }) : /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("p", {
        className: subheadline,
        children: t('configurator.inspiration.subheadline')
      }), /*#__PURE__*/jsxs("div", {
        className: mainImageCard,
        children: [/*#__PURE__*/jsx("img", {
          src: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.image,
          alt: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
          className: mainImage
        }), selectedItem && /*#__PURE__*/jsxs("div", {
          className: mainImageOverlay,
          children: [/*#__PURE__*/jsx("h3", {
            className: mainImageTitle,
            children: selectedItem.name
          }), !!selectedItem.description && /*#__PURE__*/jsx("p", {
            className: mainImageDescription,
            children: selectedItem.description
          })]
        })]
      })]
    }), /*#__PURE__*/jsx("div", {
      className: styleSelection,
      children: /*#__PURE__*/jsx("div", {
        className: styleButtonsSwiper,
        children: /*#__PURE__*/jsx(Swiper, {
          modules: [Navigation],
          spaceBetween: 10,
          slidesPerView: "auto",
          navigation: true,
          wrapperClass: "no-swiping",
          resizeObserver: true,
          onSwiper: setStyleSwiperRef,
          children: roomItems.map(function (style, idx) {
            return /*#__PURE__*/jsx(SwiperSlide, {
              children: /*#__PURE__*/jsxs("button", {
                type: "button",
                className: "".concat(styleButton, " ").concat(aiState.selectedRoom === style.key ? styleButtonSelected : ''),
                onClick: function onClick() {
                  aiState.setSelectedRoom(style.key);
                  setPlaceholderSelected(true);
                  styleSwiperRef === null || styleSwiperRef === void 0 || styleSwiperRef.slideTo(idx);
                },
                disabled: aiState.isAnyGenerationInProgress,
                title: style.name,
                children: [/*#__PURE__*/jsx("img", {
                  src: style.image,
                  alt: style.name,
                  className: styleButtonImage
                }), /*#__PURE__*/jsx("span", {
                  className: styleButtonLabel,
                  children: style.name
                })]
              })
            }, style.key);
          })
        })
      })
    }), /*#__PURE__*/jsx("div", {
      className: generateSection,
      children: scenesRemaining > 0 && !keepUnlockVisible ? /*#__PURE__*/jsxs(Fragment, {
        children: [/*#__PURE__*/jsxs("button", {
          type: "button",
          className: generateButton,
          onClick: function onClick() {
            return selectedItem && aiState.handleGenerate(selectedItem.key, true);
          },
          disabled: !selectedItem || aiState.isAnyGenerationInProgress || ((_budget$isLimitReache = budget === null || budget === void 0 ? void 0 : budget.isLimitReached) !== null && _budget$isLimitReache !== void 0 ? _budget$isLimitReache : false) || hasImageForCurrentPrompt,
          children: [/*#__PURE__*/jsx("span", {
            children: hasImageForCurrentPrompt ? t('configurator.inspiration.generated') : aiState.isAnyGenerationInProgress ? t('configurator.inspiration.generating') : generationErrorKey ? t('configurator.inspiration.retry') : t('configurator.inspiration.generate')
          }), !hasImageForCurrentPrompt && !aiState.isAnyGenerationInProgress && /*#__PURE__*/jsx("span", {
            className: generateButtonSubtext,
            children: t('configurator.inspiration.generateTime', '(ca. 20 Sek.)')
          })]
        }), generationErrorKey && /*#__PURE__*/jsx("p", {
          className: errorMessage,
          children: t(generationErrorKey, generationErrorKey === 'configurator.roomRendering.aiGenerationError.imageSafety' ? t('configurator.inspiration.imageSafetyError') : generationErrorKey === 'configurator.roomRendering.aiGenerationError.resourceExhausted' ? t('configurator.inspiration.resourceExhaustedError') : t('configurator.inspiration.unknownError'))
        }), /*#__PURE__*/jsx("p", {
          className: remainingText,
          children: scenesRemaining === 1 ? t('configurator.inspiration.remainingOne') : t('configurator.inspiration.remaining', {
            scenesRemaining: scenesRemaining
          })
        })]
      }) : /*#__PURE__*/jsx(UnlockCard, {
        budgetTotal: (_budget$total = budget === null || budget === void 0 ? void 0 : budget.total) !== null && _budget$total !== void 0 ? _budget$total : 3,
        leadBonus: leadBonus,
        leadKeyActive: (_budget$leadKeyActive = budget === null || budget === void 0 ? void 0 : budget.leadKeyActive) !== null && _budget$leadKeyActive !== void 0 ? _budget$leadKeyActive : false,
        onSubmit: (/*#__PURE__*/function () {
          var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(email) {
            var result;
            return _regeneratorRuntime.wrap(function _callee$(_context) {
              while (1) switch (_context.prev = _context.next) {
                case 0:
                  setKeepUnlockVisible(true);
                  _context.next = 3;
                  return aiState.createLeadKey(email);
                case 3:
                  result = _context.sent;
                  return _context.abrupt("return", result !== null && result !== void 0 ? result : {
                    success: false
                  });
                case 5:
                case "end":
                  return _context.stop();
              }
            }, _callee);
          }));
          return function (_x) {
            return _ref2.apply(this, arguments);
          };
        }()),
        onSuccess: function onSuccess() {
          return setKeepUnlockVisible(false);
        }
      })
    }), scenesRemaining > 0 && !keepUnlockVisible && /*#__PURE__*/jsxs("div", {
      className: customInputSection,
      children: [/*#__PURE__*/jsx("p", {
        className: styleDescriptionText,
        children: t('configurator.inspiration.customPromptToggle', 'Optional: Bild personalisieren')
      }), /*#__PURE__*/jsx("input", {
        type: "text",
        className: customInput,
        value: (_aiState$customPrompt = aiState.customPromptInput) !== null && _aiState$customPrompt !== void 0 ? _aiState$customPrompt : '',
        onChange: function onChange(e) {
          return aiState.setCustomPromptInput(e.target.value);
        },
        placeholder: t('configurator.inspiration.customPlaceholder')
      }), promptExamples.length > 0 && /*#__PURE__*/jsx("div", {
        className: promptExamplesSwiper,
        children: /*#__PURE__*/jsx(Swiper, {
          spaceBetween: 8,
          slidesPerView: "auto",
          wrapperClass: "no-swiping",
          resizeObserver: true,
          children: promptExamples.map(function (example) {
            return /*#__PURE__*/jsx(SwiperSlide, {
              children: /*#__PURE__*/jsx("button", {
                type: "button",
                className: promptExampleChip,
                onClick: function onClick() {
                  return aiState.setCustomPromptInput(example);
                },
                children: example
              })
            }, example);
          })
        })
      })]
    }), /*#__PURE__*/jsx("button", {
      type: "button",
      className: tryVariantLink,
      onClick: function onClick() {
        var firstStep = viewHandler.tabGroupState.firstVisibleConfigStep;
        if (firstStep) viewHandler.navigateToConfigStep(firstStep.key);
      },
      children: t('configurator.inspiration.tryVariant')
    })]
  });
};
var StyleConsultant$1 = observer(StyleConsultant);

export { StyleConsultant$1 as default };
