import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
import { useSticky } from "@/hooks/use-stickies";
import { STICKIES_PER_PAGE } from "@buzzwaretech/constants";
import { ContentWrapper, Loader } from "@buzzwaretech/ui";
import { cn } from "@buzzwaretech/utils";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useRef, useState } from "react";
import useSWR from "swr";
import { StickiesLayout } from "./stickies-list";

export const StickiesInfinite = observer(function StickiesInfinite() {
  const { workspaceSlug } = useParams();
  // hooks
  const {
    fetchWorkspaceStickies,
    fetchNextWorkspaceStickies,
    getWorkspaceStickyIds,
    loader,
    paginationInfo,
  } = useSticky();
  //state
  const [elementRef, setElementRef] = useState<HTMLDivElement | null>(null);

  // ref
  const containerRef = useRef<HTMLDivElement>(null);

  useSWR(
    workspaceSlug ? `WORKSPACE_STICKIES_${workspaceSlug}` : null,
    workspaceSlug
      ? () => fetchWorkspaceStickies(workspaceSlug.toString())
      : null,
    { revalidateIfStale: false, revalidateOnFocus: false },
  );

  const handleLoadMore = () => {
    if (loader === "pagination") return;
    fetchNextWorkspaceStickies(workspaceSlug?.toString());
  };

  const hasNextPage =
    paginationInfo?.next_page_results &&
    paginationInfo?.next_cursor !== undefined;
  const shouldObserve = hasNextPage && loader !== "pagination";
  const workspaceStickies = getWorkspaceStickyIds(workspaceSlug?.toString());
  useIntersectionObserver(
    containerRef,
    shouldObserve ? elementRef : null,
    handleLoadMore,
  );

  return (
    <ContentWrapper ref={containerRef} className="space-y-4">
      <StickiesLayout
        workspaceSlug={workspaceSlug.toString()}
        intersectionElement={
          hasNextPage &&
          workspaceStickies?.length >= STICKIES_PER_PAGE && (
            <div
              className={cn("box-border flex min-h-[300px] w-full p-2")}
              ref={setElementRef}
              id="intersection-element"
            >
              <div className="flex min-h-[300px] w-full rounded-sm">
                <Loader className="h-full w-full">
                  <Loader.Item height="100%" width="100%" />
                </Loader>
              </div>
            </div>
          )
        }
      />
    </ContentWrapper>
  );
});