/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useGateValue } from '@statsig/react-bindings';
import { observer } from 'mobx-react-lite';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';

import { useStores } from '@/app/(root)/AppProviders';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { Playlist } from '@/state/clipStore';
import {
  DEFAULT_PLAYLIST_PAGE_SIZE,
  FALLBACK_AURA_URL,
} from '@/utils/constants';
import { staticAssetUrl } from '@/utils/staticAssetUrl';

const TrashPlaylist = observer<any>(() => {
  const { library, clips: clipsStore } = useStores();
  const router = useRouter();
  const [playlists, setPlaylists] = useState<Playlist[]>([]);
  const [page, setPage] = useState(1);
  const maxPages = Math.ceil(
    library.numTotalPlaylists / DEFAULT_PLAYLIST_PAGE_SIZE
  );
  const showSharelist = useGateValue(
    'enable-sharelist-and-share-notifications'
  );

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

  const fallbackImages = [
    FALLBACK_AURA_URL,
    staticAssetUrl('images/placeholder-2.jpg'),
    staticAssetUrl('images/placeholder-3.jpg'),
  ];

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

  const { ref: bottomRef } = useInView({
    onChange: async (inView) => {
      if (inView && page <= maxPages) {
        await library.loadPlaylists(page, showSharelist);
        const nextPage = clipsStore.playlists;
        setPlaylists([...playlists, ...nextPage]);
        setPage(page + 1);
      }
    },
  });

  return (
    <>
      <div className='flex flex-wrap gap-8 px-6'>
        {playlists.map((playlist: any) => (
          <div
            key={playlist.id}
            className='w-[calc(25%-24px)] max-w-[400px] cursor-pointer'
            onClick={() => {
              router.push(`/playlist/${playlist.id}`);
              clipsStore.loadPlaylist(playlist.id);
            }}
          >
            <ImageWithFallback
              className='mb-2 aspect-square h-auto w-full overflow-hidden rounded-md object-cover'
              src={
                playlist.image_url ||
                playlist.playlist_clips?.[0]?.clip?.image_url ||
                playlist.image ||
                fallbackImages[
                  Math.floor(Math.random() * fallbackImages.length)
                ]
              }
              alt={`Image for ${playlist.name || playlist.title}`}
            />
            <>
              <strong>{playlist.name || 'Untitled Playlist'}</strong>
            </>
          </div>
        ))}
        {page <= maxPages && playlists.length > 0 && (
          <div ref={bottomRef}>
            <SpinnerSVG />
          </div>
        )}
      </div>
    </>
  );
});

export default TrashPlaylist;