"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 _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, _ref) {
    let {
      attrs,
      expose
    } = _ref;
    const inputRef = (0, _vue.shallowRef)();
    const internalValue = (0, _vue.computed)(() => {
      const {
        value,
        mask
      } = props;
      return value && typeof mask === 'string' ? mask : 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();
      }
      syncSelection();
    };
    const onInternalKeyUp = _ref2 => {
      let {
        key
      } = _ref2;
      if (key === 'Backspace' && !props.value) {
        props.onActiveChange(props.index - 1);
      }
      syncSelection();
    };
    expose({
      focus
    });
    return () => (0, _vue.createVNode)(_Input.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
      "ref": inputRef
    }, attrs), (0, _omit.default)(props, ['index', 'value', 'mask', 'onChange'])), {}, {
      "class": attrs.class,
      "value": internalValue.value,
      "onRawInput": onInternalChange,
      "onFocus": syncSelection,
      "onMousedown": syncSelection,
      "onMouseUp": syncSelection,
      "onKeydown": onInternalKeydown,
      "onKeyup": onInternalKeyUp,
      "type": props.mask === true ? 'password' : 'text'
    }), null);
  }
});