import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _excluded = ["maskChar", "alwaysShowMask", "hasLeftIcon", "hasRightIcon", "maxLength", "onValueChange", "onUnexpectedInput", "defaultValue", "style"];
import React from 'react';
import ReactInputMask from 'react-input-mask';
import { isNonNullable } from "../../../lib/utils";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { MaskCharLowLine } from "../../MaskCharLowLine";
import { cx } from "../../../lib/theming/Emotion";
import { createPropsGetter } from "../../../lib/createPropsGetter";
import { styles } from "../InternalMaskedInput.styles";
export var MaskedInputDataTids = {
  root: 'MaskedInput__root'
};

/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.
 * todo: выпилить в 5 версии библиотеки.
 * */
export var InternalMaskedInput = /*#__PURE__*/function (_React$PureComponent) {
  function InternalMaskedInput(_props) {
    var _this;
    _this = _React$PureComponent.call(this, _props) || this;
    _this.getProps = createPropsGetter(InternalMaskedInput.defaultProps);
    _this.input = null;
    _this.reactInputMask = null;
    _this.getValue = function (props) {
      if (isNonNullable(props.value)) {
        return props.value.toString();
      }
      if (isNonNullable(props.defaultValue)) {
        return props.defaultValue.toString();
      }
      return '';
    };
    _this.refInput = function (input) {
      _this.input = input;
    };
    _this.refMaskedInput = function (reactInputMask) {
      _this.reactInputMask = reactInputMask;
    };
    _this.handleChange = function (event) {
      if (event.target.value === _this.state.value) {
        _this.handleUnexpectedInput();
      } else {
        _this.setState({
          value: event.target.value,
          originValue: event.target.value
        });
        if (_this.props.onValueChange) {
          _this.props.onValueChange(event.target.value);
        }
        if (_this.props.onChange) {
          _this.props.onChange(event);
        }
      }
    };
    _this.handleFocus = function (event) {
      _this.setState({
        focused: true
      });
      if (_this.props.onFocus) {
        _this.props.onFocus(event);
      }
    };
    _this.handleBlur = function (event) {
      _this.setState({
        focused: false
      });
      if (_this.props.onBlur) {
        _this.props.onBlur(event);
      }
    };
    _this.preprocess = function (newState, oldState, userInput, options) {
      var visibleMaskChars = new Array(options.mask.length).fill(_this.getProps().maskChar);
      if (newState.value !== oldState.value && userInput === null) {
        _this.setState({
          value: newState.value,
          originValue: newState.value
        });
      }
      options.mask.split('').forEach(function (_char2, index) {
        // @ts-expect-error InternalMaskedInput will be deleted in 5.0
        if (options.permanents.includes(index)) {
          visibleMaskChars[index] = _char2;
        }
        if (newState.value[index]) {
          visibleMaskChars[index] = newState.value[index];
        }
      });
      var emptyValue = visibleMaskChars.join('');
      if (_this.state.emptyValue !== emptyValue) {
        _this.setState({
          emptyValue: emptyValue
        });
      }
      return newState;
    };
    _this.isMaskVisible = function () {
      return _this.props.alwaysShowMask || _this.state.focused;
    };
    _this.handleUnexpectedInput = function () {
      if (_this.props.onUnexpectedInput) {
        _this.props.onUnexpectedInput(_this.state.value);
      }
    };
    _this.state = {
      value: _this.getValue(_props),
      originValue: _this.getValue(_props),
      emptyValue: '',
      focused: false
    };
    return _this;
  }
  _inheritsLoose(InternalMaskedInput, _React$PureComponent);
  var _proto = InternalMaskedInput.prototype;
  _proto.componentDidMount = function componentDidMount() {
    if (this.reactInputMask) {
      // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue
      this.reactInputMask.forceUpdate();
    }
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.props.value !== prevProps.value) {
      this.setState({
        value: this.props.value ? this.props.value.toString() : ''
      });
    }
  };
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.renderMain = function renderMain() {
    var _this$props = this.props,
      maskChar = _this$props.maskChar,
      alwaysShowMask = _this$props.alwaysShowMask,
      hasLeftIcon = _this$props.hasLeftIcon,
      hasRightIcon = _this$props.hasRightIcon,
      maxLength = _this$props.maxLength,
      onValueChange = _this$props.onValueChange,
      onUnexpectedInput = _this$props.onUnexpectedInput,
      defaultValue = _this$props.defaultValue,
      style = _this$props.style,
      inputProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
    var _this$state = this.state,
      emptyValue = _this$state.emptyValue,
      value = _this$state.value,
      originValue = _this$state.originValue;
    var leftHelper = (style == null ? void 0 : style.textAlign) !== 'right' && /*#__PURE__*/React.createElement("span", {
      style: {
        color: 'transparent'
      }
    }, emptyValue.slice(0, originValue.length));
    var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
    var rightHelper = emptyValue.slice(originValue.length).split('').map(function (_char, i) {
      return _char === '_' ? /*#__PURE__*/React.createElement(MaskCharLowLine, {
        key: i
      }) : _char;
    });
    return /*#__PURE__*/React.createElement("span", {
      "data-tid": MaskedInputDataTids.root,
      className: styles.container(),
      "x-ms-format-detection": "none"
    }, /*#__PURE__*/React.createElement(ReactInputMask, _extends({}, inputProps, {
      maskChar: null // @ts-expect-error InternalMaskedInput will be deleted in 5.0
      ,
      beforeMaskedValueChange: this.preprocess,
      alwaysShowMask: false,
      onChange: this.handleChange,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      value: value,
      inputRef: this.refInput,
      ref: this.refMaskedInput,
      style: _extends({}, style)
    })), this.isMaskVisible() && /*#__PURE__*/React.createElement("span", {
      className: cx(styles.inputMask(this.theme), leftClass),
      translate: "no"
    }, leftHelper, rightHelper));
  };
  return InternalMaskedInput;
}(React.PureComponent);
InternalMaskedInput.__KONTUR_REACT_UI__ = 'InternalMaskedInput';
InternalMaskedInput.displayName = 'InternalMaskedInput';
InternalMaskedInput.defaultProps = {
  maskChar: '_'
};