import { useEffect, useRef, useState } from "react";
import { Empty } from "@arco-design/web-react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { setLoadingTrue, setLoadingFalse } from "@/store/slices/loadingSlice";

const InfiniteScroll = ({
  loadMore,
  hasMore,
  children,
  threshold = 50,
  className = "",
}) => {
  const dispatch = useDispatch();
  const containerRef = useRef(null);
  const loading = useSelector((state) => state.loading.value);

  useEffect(() => {
    const handleScroll = () => {
      if (!containerRef.current || loading || !hasMore) return;

      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;

      if (scrollTop + clientHeight >= scrollHeight - threshold) {
        dispatch(setLoadingTrue());
        loadMore().finally(() => {
          dispatch(setLoadingFalse());
        });
      }
    };

    const container = containerRef.current;
    if (container) {
      container.addEventListener("scroll", handleScroll);
      // 初始加载时检查是否需要加载更多
      handleScroll();
    }

    return () => {
      if (container) {
        container.removeEventListener("scroll", handleScroll);
      }
    };
  }, [loadMore, hasMore, threshold, loading]);

  return (
    <div
      ref={containerRef}
      className={`infinite-scroll-container ${className}`}
    >
      {children}
      {!hasMore && !loading && <Empty description="没有更多了" />}
    </div>
  );
};

export default InfiniteScroll;