import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { computed, defineComponent, ref } from 'vue';
import { normalizeStyle } from '@vue/shared';
import inputProps from './inputProps';
import useMemo from '../_util/hooks/useMemo';
import Icon from '../icon';
const prefixCls = 'x-textarea';
export default defineComponent({
  name: prefixCls,
  inheritAttrs: false,
  props: { ...inputProps,
    autosize: [Boolean, Object]
  },
  emits: ['update:value', 'change', 'input', 'focus', 'blur'],

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

      return !!((_valRef$value = valRef.value) !== null && _valRef$value !== void 0 && _valRef$value.length) && !props.disabled;
    });
    const focusedRef = ref(); // ========================== 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 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();
    }

    function onMousedown() {
      window.requestAnimationFrame(focus);
    } // ========================== Expose ==========================


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

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

    expose({
      focus,
      blur,

      get value() {
        return inputRef.value.value;
      }

    });
    return () => {
      const inputEl = inputRef.value;
      const {
        disabled,
        placeholder,
        allowClear,
        autosize,
        value
      } = props;
      let {
        class: clz,
        style,
        ...$attrs
      } = attrs;
      const {
        minRows = 3,
        maxRows
      } = autosize;
      const inputStyle = {};

      if (inputEl) {
        inputEl.style.height = ''; // 刷新scrollHeight

        const originStyle = window.getComputedStyle(inputEl);
        let minHeight = 0,
            maxHeight = Number.MAX_SAFE_INTEGER,
            height = inputEl.scrollHeight;
        const lh = originStyle.lineHeight;

        if (minRows > 0) {
          minHeight = minRows * parseInt(lh);
          inputStyle.minHeight = minHeight + 'px';
        }

        if (maxRows > 0) {
          maxHeight = maxRows * parseInt(lh);
          inputStyle.maxHeight = maxHeight + 'px';
        }

        if (autosize === false) {
          inputStyle.height = '100%';
        } else {
          height = Math.min(maxHeight, Math.max(minHeight, height));
          inputStyle.height = height + 'px';
        }
      }

      const cls = [prefixCls, clz, {
        [`${prefixCls}-disabled`]: disabled,
        [`${prefixCls}-focus`]: focusedRef.value
      }];

      if (autosize !== false) {
        style = normalizeStyle([style, {
          resize: 'none'
        }]);
      }

      return _createVNode("div", {
        "class": cls,
        "style": style,
        "onMousedown": onMousedown
      }, [_createVNode("textarea", _mergeProps({
        "class": "x-input_input",
        "style": inputStyle,
        "ref": inputRef,
        "value": valRef.value,
        "disabled": disabled,
        "placeholder": placeholder,
        "onInput": onChange,
        "onChange": onChange,
        "onFocus": onFocus,
        "onBlur": onBlur
      }, $attrs), null), allowClear && _withDirectives(_createVNode("span", {
        "class": `${prefixCls}_clear`,
        "onClick": onClear
      }, [_createVNode(Icon, {
        "type": "cross"
      }, null)]), [[_vShow, showClear.value]])]);
    };
  }

});