import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
import { getComponent } from '../_util/props-util';
import { computed, defineComponent, ref, createTextVNode } from 'vue';
import inputProps from './inputProps';
import Button from '../button';
import Input from './input';
const prefixCls = 'x-input-search';
export default defineComponent({
  name: prefixCls,
  components: {
    Button,
    Input
  },
  props: { ...inputProps,
    enterButton: String || Boolean
  },

  setup(props, {
    attrs,
    emit,
    expose,
    slots
  }) {
    const showBtn = computed(() => !!props.enterButton || props.enterButton === '' || !!slots.enterButton);
    const btnText = computed(() => {
      let text = '🔍';

      if (typeof props.enterButton === 'string') {
        text = props.enterButton || text;
      }

      return text;
    });
    const btnIcon = computed(() => {
      if (props.enterButton === '') return 'search';
      if (props.enterButton === true) return 'search';
    });
    const inputRef = ref();

    function onSearch() {
      emit('search', inputRef.value.value);
      inputRef.value.focus();
    }

    expose({
      focus() {
        inputRef.value.focus();
      },

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

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

    });
    return vm => {
      const cls = [prefixCls, {
        [`${prefixCls}-enter`]: showBtn.value
      }];

      let enterNode = showBtn.value && (getComponent(vm, 'enterButton') || _createVNode(Button, {
        "type": "primary"
      }, {
        default: () => [btnText.value]
      }));

      if (!enterNode) enterNode = createTextVNode('🔍');

      const _enterNode = function () {
        return enterNode;
      }();

      enterNode = _createVNode("div", {
        "class": `${prefixCls}_enter`,
        "onClick": onSearch
      }, [enterNode]);
      return _createVNode(Input, _mergeProps({
        "class": cls,
        "ref": inputRef
      }, { ...props,
        ...attrs
      }, {
        "onPressEnter": onSearch
      }), {
        addonAfter: () => showBtn.value && enterNode,
        suffix: () => !showBtn.value && enterNode
      });
    };
  }

});