import { ref } from 'vue';

function useInput(updateValue) {
  const isComposing = ref(false);
  const handleInput = event => {
    if (event instanceof InputEvent && !event.isComposing) {
      isComposing.value = false;
    }
    if (!isComposing.value) {
      if (event instanceof Event) {
        const {
          value
        } = event.target;
        updateValue(value);
      } else {
        updateValue(event);
      }
    }
  };
  const handleCompositionStart = () => {
    isComposing.value = true;
  };
  const handleCompositionEnd = event => {
    if (isComposing.value) {
      isComposing.value = false;
      handleInput(event);
    }
  };
  return {
    handleInput,
    handleCompositionStart,
    handleCompositionEnd
  };
}

export { useInput };
