import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
import "core-js/modules/es.array.reduce.js";
import { isOn } from "@vue/shared";
import { computed, defineComponent, ref } from 'vue';
import { getComponent } from "../_util/props-util";
import useMemo from "../_util/hooks/useMemo";
import inputProps from './inputProps';
import Icon from '../icon';
const prefixCls = 'x-input';
export default defineComponent({
  name: prefixCls,
  props: inputProps,
  emits: ['update:value', 'change', 'input', 'pressEnter', 'keydown', 'focus', 'blur'],

  setup(props, {
    attrs,
    emit,
    expose
  }) {
    const inputRef = ref();
    const focusedRef = ref();
    const valRef = useMemo(() => props.value);
    const showClearRef = computed(() => {
      var _valRef$value;

      return !!((_valRef$value = valRef.value) !== null && _valRef$value !== void 0 && _valRef$value.length) && !props.disabled;
    });
    const eventsRef = computed(() => Object.keys(attrs).filter(e => isOn(e)).reduce((o, e) => (o[e] = attrs[e], o), {})); // ========================== Event ==========================

    function onChange(e) {
      valRef.value = inputRef.value.value;
      emit('update:value', inputRef.value.value);
      emit('change', e);
      emit('input', e);
    }

    function onFocus(e) {
      focusedRef.value = true;
      emit('focus', e);
    }

    function onBlur(e) {
      focusedRef.value = false;
      emit('blur', e);
    }

    function onKeydown(e) {
      if (e.keyCode === 13) {
        emit('pressEnter', e);
      }

      emit('keydown', e);
    }

    function onClearDown() {
      window.requestAnimationFrame(focus);
    }

    function onClear(e) {
      e.stopPropagation();
      const target = inputRef.value;
      target.value = '';
      Object.defineProperty(e, 'target', {
        writable: true
      });
      Object.defineProperty(e, 'currentTarget', {
        writable: true
      }); // @ts-ignore

      e.target = e.currentTarget = target;
      onChange(e);
      focus();
    } // ========================== Expose ==========================


    function focus() {
      inputRef.value.focus();
    }

    function blur() {
      inputRef.value.blur();
    }

    expose({
      focus,
      blur,

      get value() {
        return valRef.value;
      }

    });
    return vm => {
      const {
        disabled,
        placeholder,
        allowClear
      } = props;
      const addon1Node = getComponent(vm, 'addonBefore');
      const addon2Node = getComponent(vm, 'addonAfter');
      const prefixNode = getComponent(vm, 'prefix');
      const suffixNode = getComponent(vm, 'suffix');
      const cls = [prefixCls, disabled && `${prefixCls}-disabled`, focusedRef.value && `${prefixCls}-focus`];
      return _createVNode("div", {
        "class": cls
      }, [addon1Node && _createVNode("span", {
        "class": `${prefixCls}_addon`
      }, [addon1Node]), prefixNode && _createVNode("span", {
        "class": `${prefixCls}_prefix`
      }, [prefixNode]), _createVNode("input", {
        "class": `${prefixCls}_input`,
        "ref": inputRef,
        "value": valRef.value,
        "type": "text",
        "disabled": disabled,
        "placeholder": placeholder,
        "onInput": onChange,
        "onChange": onChange,
        "onKeydown": onKeydown,
        "onFocus": onFocus,
        "onBlur": onBlur
      }, null), suffixNode && _createVNode("span", {
        "class": `${prefixCls}_suffix`
      }, [suffixNode]), allowClear && _withDirectives(_createVNode("span", {
        "class": `${prefixCls}_clear`,
        "onMousedown": onClearDown,
        "onClick": onClear
      }, [_createVNode(Icon, {
        "type": "cross"
      }, null)]), [[_vShow, showClearRef.value]]), addon2Node && _createVNode("span", {
        "class": `${prefixCls}_addon`
      }, [addon2Node])]);
    };
  }

});