/*
 * @file /src/vue3/hooks/top-sticky.ts
 * @description 吸顶工具
 * @author tsl (randy1924@163.com)
 * @date 2026-03-20 17:51:50
 * @lastModified 2026-03-26 10:24:21
 * @lastModifiedBy tsl (randy1924@163.com)
 */

import { ref } from "vue";

export interface UseTopStickyOptions {
  context?: never;
  offsetTop?: number;
  targetSelector: string;
  onToTopChange?: (toTop: boolean) => void;
}

export function useTopSticky(options: UseTopStickyOptions) {
  const context = options.context;
  const offsetTop = options.offsetTop ?? 0;
  const targetSelector = options.targetSelector;
  const onToTopChange = options.onToTopChange;

  // 是否达到了顶部
  const isToTop = ref(false);

  const systemInfo = uni.getSystemInfoSync();
  const intersectionObserver = uni.createIntersectionObserver(context);

  // 观察目标元素
  intersectionObserver
    .relativeToViewport({
      top: 0,
      bottom: -systemInfo.windowHeight + offsetTop,
    })
    .observe(targetSelector, (res) => {
      console.log("intersectionObserver", res);
      // 当目标与视口顶部距离小于0px时，isToTop 设为 true
      isToTop.value = res.intersectionRatio > 0;
      onToTopChange?.(isToTop.value);
    });

  return { isToTop };
}