import { ComponentInstance, onBeforeUnmount, Ref, ref, ShallowRef, watch } from "vue";
import Intersect, { ObserveDirectiveBinding } from "vuetify/directives/intersect";

export const useLazyLoad = (props: { root: Readonly<ShallowRef<ComponentInstance<any>>> }) => {
  const isVisible: Ref<boolean> = ref(false);
  const binding: Ref<ObserveDirectiveBinding | undefined> = ref(undefined);

  watch(
    props.root,
    (newval: ComponentInstance<any>) => {
      if (newval && !binding.value) {
        const binding: ObserveDirectiveBinding = {
          modifiers: {
            once: false,
            quiet: false,
          },
          value(isIntersecting, entries, observer) {
            isVisible.value = isIntersecting;
          },
          instance: newval,
          oldValue: undefined,
          dir: {},
        };
        Intersect.mounted(newval.$el, binding);
      }
    },
    { immediate: true }
  );

  onBeforeUnmount(() => {
    if (binding.value && binding.value.instance) {
      Intersect.unmounted(binding.value.instance.$el, binding.value);
    }
  });

  return {
    isVisible,
  };
};