'use client'

import { Suspense, useState, useEffect, useRef } from "react";

export const List = ({ result, items, pageInfo }: any) => {
  const { data, loading, error, fetchMore } = result;

  console.log('RUN')

  const targetRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          if (pageInfo) {
            fetchMore({
              variables: {
                cursor: pageInfo.endCursor,
              },
            });
          }
        }
      },
      {
        // TODO: Make sure this works at all window sizes
        threshold: 1,
        //root: null,
        rootMargin: "300px",
      },
    );

    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    return () => {
      if (targetRef.current) {
        observer.disconnect();
      }
    };
  }, [targetRef, items]);

  if (error) {
    return (
      <div>
        Error
      </div>
    );
  }

  if (items?.length === 0) {
    return (
      <p>No items</p>
    );
  }

  return (
    <div>
      <Suspense fallback={<ListSkeleton num={10} />}>
        <div>
          {(!items || items?.length < 1) && (
            <div>
              <p>No items</p>
            </div>
          )}
          {items?.map((item: any, num: any) => (
            <Item key={item.id} item={item} />
          ))}
        </div>
      </Suspense>
      <div>{pageInfo?.hasNextPage && <ListSkeleton num={5} />}</div>
      <div>{loading && <ListSkeleton num={5} />}</div>
      <div ref={targetRef} />
    </div>
  );
};
}

export const ListSkeleton = ({ num = 10 }) => {
  return (
    <div>
      {Array.from({ length: num }, (_, index) => (
        <ItemSkeleton key={index} />
      ))}
    </div>
  )

fetchMore({
  variables: {
    cursor: pageInfo.endCursor,
  },
});