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

var paletteItem = "palette-item-F-QYy";
var wcTextBox = "wcTextBox-lKT8X";
var headerTitle = "headerTitle-RuXs-";
var css_248z = ".palette-item-F-QYy {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.palette-item-F-QYy > div {\n  width: 100%;\n}\n.wcTextBox-lKT8X {\n  width: 100%;\n\n  max-width: 120px;\n  padding: 12px 5px;\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.headerTitle-RuXs- {\n  padding-top: 6px;\n  padding-left: 6px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n/*Hide Arrows*/\n.palette-item-F-QYy input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.palette-item-F-QYy input[type='number'] {\n  -moz-appearance: textfield;\n}\n";
styleInject(css_248z);

var NumberBox = function NumberBox(_ref) {
  var _itemPalette$selected, _itemPalette$selected4, _itemPalette$info, _viewHandler$getViewC, _itemPalette$selected5;
  var itemP = _ref.item,
    paletteId = _ref.paletteId;
  var item = itemP;
  var throttleRef = useRef(null);
  var viewHandler = useViewHandler();
  var itemPalette = viewHandler.settingsState.itemPalettes.get(paletteId);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    userInFocus = _useState2[0],
    setUserInFocus = _useState2[1];
  var _useState3 = useState(itemPalette === null || itemPalette === void 0 || (_itemPalette$selected = itemPalette.selectedElements) === null || _itemPalette$selected === void 0 || (_itemPalette$selected = _itemPalette$selected[0]) === null || _itemPalette$selected === void 0 ? void 0 : _itemPalette$selected.freeText),
    _useState4 = _slicedToArray(_useState3, 2),
    value = _useState4[0],
    setValue = _useState4[1];
  var isDefined = true;
  if (itemPalette) {
    var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(itemPalette.configStepKey);
    if (step) isDefined = step.configStep.isDefined;
  }
  if (!itemPalette) return /*#__PURE__*/jsx(Fragment, {});
  var handleChange = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
      var _e$target$value;
      var value;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            value = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '';
            if (!e.target.value.endsWith('.')) {
              _context.next = 4;
              break;
            }
            setValue(e.target.value);
            return _context.abrupt("return");
          case 4:
            value = value.replace(/[^0-9.,]/g, '');
            if (value.includes(',') && viewHandler.getViewConfig().allowComma) value = value.replace(/\,/g, '.');

            //delay logic update for 500ms
            if (throttleRef.current) clearTimeout(throttleRef.current);
            throttleRef.current = setTimeout(function () {
              return updateLogic(value);
            }, 500);
            setValue(value);
          case 9:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function handleChange(_x) {
      return _ref2.apply(this, arguments);
    };
  }();
  var updateLogic = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            if (!itemPalette) {
              _context2.next = 3;
              break;
            }
            _context2.next = 3;
            return viewHandler.paletteViewHandler.onRangeClickChange(itemPalette, item, value);
          case 3:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
    return function updateLogic(_x2) {
      return _ref3.apply(this, arguments);
    };
  }();
  useEffect(function () {
    var _itemPalette$selected2, _itemPalette$selected3;
    setValue((_itemPalette$selected2 = (_itemPalette$selected3 = itemPalette.selectedElements) === null || _itemPalette$selected3 === void 0 || (_itemPalette$selected3 = _itemPalette$selected3[0]) === null || _itemPalette$selected3 === void 0 ? void 0 : _itemPalette$selected3.freeText) !== null && _itemPalette$selected2 !== void 0 ? _itemPalette$selected2 : '');
  }, [(_itemPalette$selected4 = itemPalette.selectedElements) === null || _itemPalette$selected4 === void 0 || (_itemPalette$selected4 = _itemPalette$selected4[0]) === null || _itemPalette$selected4 === void 0 ? void 0 : _itemPalette$selected4.freeText]);
  return /*#__PURE__*/jsxs("div", {
    ref: function ref(_ref4) {
      if (itemPalette) itemPalette.htmlRef = _ref4;
    },
    style: {
      display: 'block'
    },
    children: [itemPalette && /*#__PURE__*/jsx("div", {
      className: headerTitle,
      children: itemPalette.name
    }), (!userInFocus || !((_itemPalette$info = itemPalette.info) !== null && _itemPalette$info !== void 0 && _itemPalette$info.hideDuringUserInput)) && /*#__PURE__*/jsx(StepInfo, {
      stepInfo: itemPalette.info
    }), /*#__PURE__*/jsx("div", {
      className: paletteItem,
      children: /*#__PURE__*/jsx("div", {
        style: {
          margin: '5px'
        },
        children: /*#__PURE__*/jsx("input", {
          onBlur: function onBlur() {
            setUserInFocus(false);
          },
          onFocus: function onFocus() {
            var _itemPalette$info2;
            setUserInFocus(!((_itemPalette$info2 = itemPalette.info) !== null && _itemPalette$info2 !== void 0 && _itemPalette$info2.hideDuringUserInput));
          },
          autoFocus: viewHandler.getViewConfig().autoFocusForInput,
          lang: "en-150",
          className: wcTextBox,
          placeholder: !((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.hideMeasureUnit) ? 'In ' + item.measureUnit : undefined,
          onChange: handleChange,
          step: "0.01",
          onKeyDown: function onKeyDown(e) {
            if (!viewHandler.getViewConfig().allowComma && (e.key === '.' || e.key === ',')) {
              e.preventDefault();
            }
          },
          value: value,
          defaultValue: isDefined ? (_itemPalette$selected5 = itemPalette.selectedElements) === null || _itemPalette$selected5 === void 0 || (_itemPalette$selected5 = _itemPalette$selected5[0]) === null || _itemPalette$selected5 === void 0 ? void 0 : _itemPalette$selected5.freeText : undefined
        })
      })
    })]
  });
};
var NumberBox$1 = observer(NumberBox);

export { NumberBox$1 as default };
