import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
import { jsxs, Fragment, jsx } 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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var title = "title-60AHO";
var input = "input-jhc29";
var css_248z = ".title-60AHO {\n  padding: 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  display: block;\n  width: 100%;\n  color: #2a4b63;\n  margin-bottom: 4px;\n}\n.input-jhc29 {\n  height: 20px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 16px;\n  border: rgb(228, 228, 231) solid 1px;\n  width: calc(100% - 28px);\n  box-sizing: content-box;\n}\n";
styleInject(css_248z);

var CustomInput = function CustomInput(_ref) {
  var selectedRoom = _ref.selectedRoom;
  var _useDivaCore = useDivaCore(),
    user = _useDivaCore.state.user;
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = useState(undefined),
    _useState4 = _slicedToArray(_useState3, 2),
    errorMessage = _useState4[0],
    setErrorMessage = _useState4[1];
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var viewHandler = useViewHandler();
  useEffect(function () {
    viewHandler.aiState.setCustomPromptInput(value);
  }, [value]);
  useEffect(function () {
    if (viewHandler.aiState.customPromptInput == value) return;
    setValue(viewHandler.aiState.customPromptInput || '');
  }, [viewHandler.aiState.customPromptInput]);
  useEffect(function () {
    var _viewHandler$aiState$;
    if (!selectedRoom) return;
    var hash = viewHandler.aiState.setHash;
    var error = (_viewHandler$aiState$ = viewHandler.aiState.aiGenerationErrors[selectedRoom]) === null || _viewHandler$aiState$ === void 0 ? void 0 : _viewHandler$aiState$[hash];
    setErrorMessage(error);
  }, [selectedRoom, viewHandler.aiState.setHash, viewHandler.aiState.aiGenerationErrors]);
  return /*#__PURE__*/jsxs("div", {
    children: [!!user && /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("div", {
        className: title,
        children: t('configurator.roomRendering.customPrompt')
      }), /*#__PURE__*/jsx("input", {
        className: input,
        type: "text",
        value: value,
        onChange: function onChange(e) {
          return setValue(e.target.value);
        }
      })]
    }), errorMessage && /*#__PURE__*/jsx("div", {
      style: {
        marginTop: '8px',
        padding: '8px',
        background: 'rgba(255, 59, 48, 0.9)',
        color: 'white',
        borderRadius: '4px',
        fontSize: '12px',
        textAlign: 'center'
      },
      children: t(errorMessage)
    })]
  });
};
var CustomInput$1 = observer(CustomInput);

export { CustomInput$1 as default };
