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 classnames from 'classnames';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
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';

var inputBox = "input-box-NpxK9";
var mobile = "mobile-OhbeO";
var css_248z = ".input-box-NpxK9 {\n  width: 70px;\n  font-size: 20px;\n  height: 22px;\n}\n\n.input-box-NpxK9.mobile-OhbeO {\n  font-size: 16px;\n  height: 18px;\n  width: 50px;\n}\n";
styleInject(css_248z);

var NumberInput = function NumberInput(_ref) {
  var item = _ref.item;
  var viewHandler = useViewHandler();
  var _useState = useState(item.numberInput),
    _useState2 = _slicedToArray(_useState, 2),
    inputValue = _useState2[0],
    setInputValue = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    inputGotChangedByComponent = _useState4[0],
    setInputGotChangedByComponent = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    invalidValue = _useState6[0],
    setInvalidValue = _useState6[1];
  useEffect(function () {
    var _item$groups;
    var opvItem = (_item$groups = item.groups) === null || _item$groups === void 0 || (_item$groups = _item$groups[0].items) === null || _item$groups === void 0 ? void 0 : _item$groups[0];
    if (inputValue && opvItem && !isNaN(inputValue) && Number(opvItem.measureMinimum) <= inputValue && Number(opvItem.measureMaximum) >= inputValue) {
      setInvalidValue(false);
      if (inputValue !== Number(opvItem.freeText)) {
        if (inputGotChangedByComponent) {
          setInputGotChangedByComponent(false);
          onRangeChange(opvItem);
        }
      }
    } else {
      setInvalidValue(true);
    }
  }, [inputValue]);
  useEffect(function () {
    setInputValue(item.numberInput);
  }, [item]);
  var onRangeChange = function onRangeChange(opvItem) {
    if (inputValue) {
      viewHandler.paletteViewHandler.onRangeClickChange(item, opvItem, inputValue.toString());
    }
  };
  var onChange = function onChange(e) {
    var newVal = Number(e.target.value);
    if (newVal >= 0) {
      setInputGotChangedByComponent(true);
      setInputValue(newVal);
    }
  };
  return /*#__PURE__*/jsxs(Fragment, {
    children: [': ', /*#__PURE__*/jsx("input", {
      className: classnames(inputBox, viewHandler.uiState.isInMobileView ? mobile : undefined),
      onChange: onChange,
      style: {
        color: invalidValue ? 'red' : undefined
      },
      type: "number",
      value: inputValue
    }), ' ', item.measureUnit]
  });
};
var NumberInput$1 = observer(NumberInput);

export { NumberInput$1 as default };
