import { observer } from 'mobx-react-lite';
import { useEffect, 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 { components } from '@/lib/gen';
import { DEFAULT_PLAYLIST_PAGE_SIZE } from '@/utils/constants';

export type PlaylistMetadata = components['schemas']['PlaylistMetadataSchema'];

const LibraryLikedPlaylists = observer<any>(({}) => {
  const [isLoading, setIsLoading] = useState(false);
  const { library, menus } = useStores();

  const [playlists, setPlaylists] = useState<PlaylistMetadata[]>([]);
  const [page, setPage] = useState(0);
  const maxPages = Math.ceil(
    library.numTotalPlaylists / DEFAULT_PLAYLIST_PAGE_SIZE
  );

  const loadData = async () => {
    if (isLoading) return;
    setIsLoading(true);
    const newPlaylists = await library.loadLikedPlaylists(page);
    setPlaylists([...(playlists || []), ...newPlaylists]);
    setPage(page + 1);
    setIsLoading(false);
  };

  useEffect(() => {
    loadData();
    menus.resetMultiSelect();
  }, []);

  const { ref: bottomRef } = useInView({
    onChange: async (inView) => {
      if (inView && page <= maxPages) {
        await loadData();
      }
    },
  });

  return (
    <div className='m-4 flex h-full flex-col overflow-y-auto'>
      {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 w-40 items-center justify-center'
              ref={bottomRef}
            >
              {isLoading && <SpinnerSVG />}
            </div>
          )}
        </div>
      ) : (
        <div className='my-16 flex justify-center'>
          <div className='flex flex-col items-center gap-8'>
            {isLoading ? (
              <SpinnerSVG />
            ) : (
              <>{'You have no playlists in your library yet'}</>
            )}
          </div>
        </div>
      )}
    </div>
  );
});

export default LibraryLikedPlaylists;