'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index$1 = require('../../../NumberInput/utils/index.js');
var TextFieldSlider_tokens = require('../../TextFieldSlider.tokens.js');
var index = require('../../utils/index.js');
var Input_styles = require('./Input.styles.js');
var reactNumberFormat = require('react-number-format');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["id", "size", "value", "min", "max", "decimalScale", "thousandsGroupStyle", "thousandSeparator", "decimalSeparator", "fixedDecimalScale", "disabled", "readOnly", "onChange", "onChangeTextField", "setInnerValue"];
var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var id = _ref.id,
    size = _ref.size,
    value = _ref.value,
    min = _ref.min,
    max = _ref.max,
    decimalScale = _ref.decimalScale,
    thousandsGroupStyle = _ref.thousandsGroupStyle,
    _ref$thousandSeparato = _ref.thousandSeparator,
    thousandSeparator = _ref$thousandSeparato === void 0 ? ' ' : _ref$thousandSeparato,
    decimalSeparator = _ref.decimalSeparator,
    fixedDecimalScale = _ref.fixedDecimalScale,
    disabled = _ref.disabled,
    readOnly = _ref.readOnly,
    onChange = _ref.onChange,
    onChangeTextField = _ref.onChangeTextField,
    setInnerValue = _ref.setInnerValue,
    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
  var _useState = React.useState(undefined),
    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
    errorClass = _useState2[0],
    setErrorClass = _useState2[1];
  var commonFormatterArgs = React.useMemo(function () {
    return index.createFormatterArgs({
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale
    });
  }, [decimalScale, thousandsGroupStyle, thousandSeparator, decimalSeparator, fixedDecimalScale]);
  var displayValue = React.useMemo(function () {
    return reactNumberFormat.numericFormatter(String(value) || '', commonFormatterArgs);
  }, [value, commonFormatterArgs]);
  var _useState3 = React.useState(value),
    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
    lastValidValue = _useState4[0],
    setLastValidValue = _useState4[1];
  var setValues = function setValues(event, newValue) {
    setInnerValue(newValue);
    var formatted = reactNumberFormat.numericFormatter(String(newValue) || '', commonFormatterArgs);
    if (onChange) {
      onChange(event || undefined, {
        raw: newValue,
        formatted: formatted
      });
    }
    if (onChangeTextField) {
      onChangeTextField({
        raw: newValue,
        formatted: formatted
      });
    }
  };
  var validateValue = function validateValue(event, newValue) {
    if (!newValue) {
      setValues(event, '');
      setLastValidValue('');
      return;
    }
    var cleanValue = Number(newValue);
    if (max !== undefined && cleanValue > max) {
      setErrorClass(TextFieldSlider_tokens.classes.errorAnimation);
      setValues(event, newValue);
      setLastValidValue(max);
      return;
    }
    if (min !== undefined && cleanValue < min) {
      setErrorClass(TextFieldSlider_tokens.classes.errorAnimation);
      setValues(event, newValue);
      setLastValidValue(min);
      return;
    }
    setValues(event, newValue);
    setLastValidValue(newValue);
  };
  var handleChange = function handleChange(event) {
    if (disabled || readOnly) {
      return;
    }
    var rawValue = event.target.value;
    var withoutExtraSymbols = rawValue.replace(index$1.excludingNumberSchema, '');
    var formattedValue = reactNumberFormat.numericFormatter(withoutExtraSymbols, index.createNormalizedFormatterArgs({
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale
    }));
    validateValue(event, formattedValue);
  };
  var handleEndErrorAnimation = function handleEndErrorAnimation() {
    setErrorClass(undefined);
    setValues(null, lastValidValue);
  };
  return /*#__PURE__*/React__default.default.createElement(Input_styles.StyledInput, _rollupPluginBabelHelpers.extends({
    id: id,
    ref: ref,
    size: size,
    value: displayValue,
    disabled: disabled,
    readOnly: readOnly,
    className: errorClass,
    onChange: handleChange,
    onAnimationEnd: handleEndErrorAnimation
  }, rest));
});

exports.Input = Input;
