import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-bbdfb97a.js';
import { useRef, useState } from 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
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 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var wcTextBox = "wcTextBox-S90ki";
var row = "row-U3gX-";
var title = "title-Hgohv";
var left = "left-0Vchg";
var right = "right-jyg7C";
var colum = "colum-DdC26";
var languageWrapper = "language-wrapper-mZdxS";
var languageTitle = "language-title-OOwzi";
var css_248z = ".palette-item-9rAyb {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n  transition: all 0.15s ease;\n}\n\n.palette-item-9rAyb:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.palette-item-9rAyb:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcTextBox-S90ki {\n  width: 100%;\n  padding: 12px 20px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.row-U3gX- {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-Hgohv {\n  display: flex;\n}\n.left-0Vchg {\n  width: 40%;\n}\n.right-jyg7C {\n  width: 60%;\n}\n\n.colum-DdC26 {\n  margin: 8px;\n  white-space: nowrap;\n}\n\n.language-wrapper-mZdxS {\n  display: flex;\n}\n.language-title-OOwzi {\n  width: 50px;\n  line-height: 60px;\n}\n";
styleInject(css_248z);

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TextBox = function TextBox(_ref) {
  var _viewHandler$getViewC, _items$;
  var item = _ref.item,
    paletteId = _ref.paletteId,
    style = _ref.style;
  var viewHandler = useViewHandler();
  var throttleRef = useRef(null);
  var items = item.groups[0].items;
  var _useState = useState(items[0].freeTextLang),
    _useState2 = _slicedToArray(_useState, 2),
    valueLang = _useState2[0],
    setValueLang = _useState2[1];
  var handleChange = function handleChange(e) {
    if (items[0]) {
      items[0].freeText = e.target.value;
      viewHandler.paletteViewHandler.clickedOnConfigPalette(items[0], 'inputbox', paletteId);
    }
  };

  //for classification
  var handleLangTextChange = function handleLangTextChange(lang, value) {
    //delay logic update for 500ms
    if (throttleRef.current) clearTimeout(throttleRef.current);
    throttleRef.current = setTimeout(function () {
      return updateLangLogic(lang, value);
    }, 500);
    setValueLang(_objectSpread(_objectSpread({}, valueLang), {}, _defineProperty({}, lang, value)));
  };
  var updateLangLogic = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(lang, value) {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            viewHandler.paletteViewHandler.onFreeTextLangChanged(lang, value, items[0], paletteId);
          case 1:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function updateLangLogic(_x, _x2) {
      return _ref2.apply(this, arguments);
    };
  }();
  var languages = (_viewHandler$getViewC = viewHandler.getViewConfig().languagesForInput) !== null && _viewHandler$getViewC !== void 0 ? _viewHandler$getViewC : [];
  return /*#__PURE__*/jsxs("div", {
    className: row,
    ref: function ref(_ref3) {
      return item.htmlRef = _ref3;
    },
    style: style,
    children: [/*#__PURE__*/jsx("div", {
      className: classnames(colum, title, left),
      children: /*#__PURE__*/jsx(SettingsHeader, {
        item: item,
        isInScroller: true,
        isSettingsHeader: false
      })
    }), /*#__PURE__*/jsx("div", {
      className: classnames(colum, right),
      children: languages.length ? /*#__PURE__*/jsx(Fragment, {
        children: languages.map(function (lang) {
          return /*#__PURE__*/jsxs("div", {
            className: languageWrapper,
            children: [/*#__PURE__*/jsx("div", {
              className: languageTitle,
              children: lang
            }), /*#__PURE__*/jsx("input", {
              className: wcTextBox,
              onChange: function onChange(e) {
                return handleLangTextChange(lang, e.target.value);
              },
              type: "text",
              value: valueLang === null || valueLang === void 0 ? void 0 : valueLang[lang]
            })]
          }, lang);
        })
      }) : /*#__PURE__*/jsx("div", {
        children: /*#__PURE__*/jsx("input", {
          className: wcTextBox,
          onChange: handleChange,
          type: "text",
          value: (_items$ = items[0]) !== null && _items$ !== void 0 && _items$.freeText ? items[0].freeText : ''
        })
      })
    })]
  });
};
var TextBox$1 = observer(TextBox);

export { TextBox$1 as default };
