import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import Input from '../Input';
import { computed, defineComponent, nextTick, shallowRef } from 'vue';
import inputProps from '../inputProps';
import omit from '../../_util/omit';
import raf from '../../_util/raf';
import '../../_util/EventInterface';
import '../../_util/statusUtils';
import classNames from '../../_util/classNames';
export default defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'AOTPInput',
  inheritAttrs: false,
  props: _extends(_extends({}, inputProps()), {
    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 = shallowRef();
    const maskValue = computed(() => typeof props.mask === 'string' ? props.mask : props.value);
    const syncSelection = () => {
      raf(() => {
        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.
      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 () => _createVNode("span", {
      "class": `${props.prefixCls}-input-wrapper`,
      "role": "presentation"
    }, [props.mask && props.value !== '' && props.value !== undefined && _createVNode("span", {
      "class": `${props.prefixCls}-mask-icon`,
      "aria-hidden": "true"
    }, [maskValue.value]), _createVNode(Input, _objectSpread(_objectSpread(_objectSpread({
      "ref": inputRef
    }, attrs), omit(props, ['index', 'mask', 'onChange', 'prefixCls'])), {}, {
      "onRawInput": onInternalChange,
      "onFocus": onInternalFocus,
      "onKeydown": onInternalKeydown,
      "onMousedown": syncSelection,
      "onMouseUp": syncSelection,
      "type": props.mask === true ? 'password' : 'text',
      "class": classNames(attrs.class, {
        [`${props.prefixCls}-mask-input`]: props.mask
      })
    }), null)]);
  }
});