import { useGateValue } from '@statsig/react-bindings';
import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useInView } from 'react-intersection-observer';

import { useStores } from '@/app/(root)/AppProviders';
import PlaylistCard from '@/components/card/PlaylistCard';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { Playlist } from '@/state/clipStore';
import { DEFAULT_PLAYLIST_PAGE_SIZE } from '@/utils/constants';

const LibraryV2TrashPlaylists = observer(() => {
  const [isLoading, setIsLoading] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);

  const { library, clips: clipsStore } = useStores();
  const showSharelist = useGateValue(
    'enable-sharelist-and-share-notifications'
  );

  const [playlists, setPlaylists] = useState<Playlist[]>([]);
  const [page, setPage] = useState(1);
  const isFetching = useRef(false);
  const maxPages = Math.ceil(
    library.numTotalPlaylists / DEFAULT_PLAYLIST_PAGE_SIZE
  );

  const loadData = useCallback(async () => {
    isFetching.current = true;
    if (!library.filters.playlists.trashed) {
      library.updateFilters(
        {
          trashed: true,
        },
        'playlists'
      );
    }
    await library.loadPlaylists(undefined, showSharelist);
    setPlaylists(clipsStore.playlists || []);
    setPage(page + 1);
    setIsLoading(false);
    isFetching.current = false;
  }, [library, showSharelist, clipsStore, page]);

  useEffect(() => {
    loadData();

    return () => {
      library.updateFilters(
        {
          trashed: false,
        },
        'playlists'
      );
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loadMoreData = useCallback(async () => {
    if (page <= maxPages && !isFetching.current && !isLoadingMore) {
      setIsLoadingMore(true);
      isFetching.current = true;
      await library.loadPlaylists(page, showSharelist);
      const nextPage = clipsStore.playlists;
      if (nextPage.length > 0 && playlists.indexOf(nextPage[0]) === -1) {
        setPlaylists((prev) => [...prev, ...nextPage]);
      }
      setPage(page + 1);
      isFetching.current = false;
      setIsLoadingMore(false);
    }
  }, [
    page,
    maxPages,
    isLoadingMore,
    library,
    showSharelist,
    clipsStore,
    playlists,
  ]);

  const { ref: bottomRef, inView } = useInView({
    onChange: async (inView: boolean) => {
      if (inView) {
        await loadMoreData();
      }
    },
  });

  useEffect(() => {
    if (inView && !isLoadingMore) {
      loadMoreData();
    }
  }, [inView, isLoadingMore, loadMoreData]);

  return (
    <div className='m-4 flex h-full flex-col'>
      {isLoading ? (
        <div className='flex justify-center pt-[60px]'>
          <SpinnerSVG />
        </div>
      ) : playlists.length > 0 ? (
        <div className='flex w-full flex-wrap items-start justify-center gap-8 md:justify-start'>
          {(playlists || []).map((playlist: any) => (
            <div key={playlist.id}>
              <PlaylistCard playlist={playlist} showPlaylistStats />
            </div>
          ))}
          {page <= maxPages && playlists.length > 0 && (
            <div
              className='flex aspect-square h-auto max-h-12 w-full items-center justify-center'
              ref={bottomRef}
            >
              {<SpinnerSVG />}
            </div>
          )}
        </div>
      ) : (
        <div className='text-center font-sans text-foreground-primary'>
          No trashed playlists found.
        </div>
      )}
    </div>
  );
});

export default LibraryV2TrashPlaylists;