"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _Input = _interopRequireDefault(require("../Input"));
var _inputProps = _interopRequireDefault(require("../inputProps"));
var _omit = _interopRequireDefault(require("../../_util/omit"));
var _raf = _interopRequireDefault(require("../../_util/raf"));
require("../../_util/EventInterface");
require("../../_util/statusUtils");
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _default = exports.default = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'AOTPInput',
  inheritAttrs: false,
  props: (0, _extends2.default)((0, _extends2.default)({}, (0, _inputProps.default)()), {
    index: Number,
    value: {
      type: String,
      default: undefined
    },
    mask: {
      type: [Boolean, String],
      default: false
    },
    onChange: {
      type: Function
    },
    onActiveChange: Function,
    status: {
      type: String,
      default: undefined
    }
  }),
  setup(props, {
    attrs,
    expose
  }) {
    const inputRef = (0, _vue.shallowRef)();
    const maskValue = (0, _vue.computed)(() => typeof props.mask === 'string' ? props.mask : props.value);
    const syncSelection = () => {
      (0, _raf.default)(() => {
        const inputEle = inputRef.value.input.input;
        if (document.activeElement === inputEle && inputEle) {
          inputEle.select();
        }
      });
    };
    const forceUpdate = () => {
      var _a, _b;
      (_b = (_a = inputRef.value.input) === null || _a === void 0 ? void 0 : _a.rootInputForceUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
    };
    // ======================= Event handlers =================
    const onInternalChange = e => {
      const value = e.target.value;
      props.onChange(props.index, value);
      // Edge:  If the value after the formatter is the same as the original value
      // the Input component will not be updated, and since the input is not controlled
      // it will result in an inconsistent UI with the value.
      (0, _vue.nextTick)(() => {
        forceUpdate();
      });
    };
    const focus = () => {
      var _a;
      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
      syncSelection();
    };
    const onInternalKeydown = event => {
      const {
        key,
        ctrlKey,
        metaKey
      } = event;
      if (key === 'ArrowLeft') {
        props.onActiveChange(props.index - 1);
      } else if (key === 'ArrowRight') {
        props.onActiveChange(props.index + 1);
      } else if (key === 'z' && (ctrlKey || metaKey)) {
        event.preventDefault();
      } else if (key === 'Backspace' && !props.value) {
        props.onActiveChange(props.index - 1);
      }
      syncSelection();
    };
    const onInternalFocus = e => {
      var _a;
      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
      syncSelection();
    };
    expose({
      focus,
      inputRef
    });
    return () => (0, _vue.createVNode)("span", {
      "class": `${props.prefixCls}-input-wrapper`,
      "role": "presentation"
    }, [props.mask && props.value !== '' && props.value !== undefined && (0, _vue.createVNode)("span", {
      "class": `${props.prefixCls}-mask-icon`,
      "aria-hidden": "true"
    }, [maskValue.value]), (0, _vue.createVNode)(_Input.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
      "ref": inputRef
    }, attrs), (0, _omit.default)(props, ['index', 'mask', 'onChange', 'prefixCls'])), {}, {
      "onRawInput": onInternalChange,
      "onFocus": onInternalFocus,
      "onKeydown": onInternalKeydown,
      "onMousedown": syncSelection,
      "onMouseUp": syncSelection,
      "type": props.mask === true ? 'password' : 'text',
      "class": (0, _classNames.default)(attrs.class, {
        [`${props.prefixCls}-mask-input`]: props.mask
      })
    }), null)]);
  }
});