import { ref, computed, nextTick } from "vue";

export const useScroll = () => {
  const scrollRef = ref(null);

  const targeScrolltDom = computed(() => scrollRef.value.targetScrollDom);

  const scrollToBottom = async () => {
    await nextTick();
    if (scrollRef.value) {
      targeScrolltDom.value.scrollTo({
        top: targeScrolltDom.value.scrollHeight,
        left: 0,
        behavior: 'smooth'
      });
    }
  }

  const scrollToBottomIfAtBottom = async () => {
    await nextTick()
    if (scrollRef.value) {
      const threshold = 100;
      const distanceToBottom = targeScrolltDom.value.scrollHeight - targeScrolltDom.value.scrollTop - targeScrolltDom.value.clientHeight;
      if (distanceToBottom <= threshold) {
        targeScrolltDom.value.scrollTop = targeScrolltDom.value.scrollHeight;
      }
    }
  }

  return {
    scrollRef,
    scrollToBottom,
    scrollToBottomIfAtBottom
  }
}