import { observer } from 'mobx-react-lite';
import { useEffect, useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import {
  GridListItemWrapper,
  GridListWrapper,
} from '@/components/grid/GridListUtils';
import SongRow from '@/components/song/SongRow';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { ContextType } from '@/logging/contextTypes';
import { Clip } from '@/state/clipStore';
import { DEFAULT_PAGE_SIZE } from '@/utils/constants';

export const TrashSongContent = observer(() => {
  const { trash, queue: queueStore, playbar: playbarStore } = useStores();
  const [isLoading, setIsLoading] = useState(true);
  const trashRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const loadData = async () => {
      await trash.loadClips(DEFAULT_PAGE_SIZE);
      setIsLoading(false);
    };
    loadData();
  }, []);

  useEffect(() => {
    if (!trashRef.current) return;
    trashRef.current.scrollTo(0, 0);
  }, [trash.filters, trashRef.current]);

  useEffect(() => {
    playbarStore.setNoClipPlayCallback(() => {
      if (trash.currentClips?.[0]) {
        playbarStore.playClip(trash.currentClips[0]);
      }
    });
  }, [trash.currentClips?.[0]]);

  return (
    <div className='flex-1 overflow-y-auto px-6' ref={trashRef}>
      {isLoading ? (
        <div className='flex items-center justify-center pt-[60px]'>
          <SpinnerSVG />
        </div>
      ) : trash.currentClips?.length === 0 ? (
        <div className='font-sans text-foreground-primary'>
          {trash.filters.page === 0
            ? 'Your trash is empty.'
            : 'No songs matching filters.'}
        </div>
      ) : (
        <GridListWrapper
          aria-label={`${(trash.currentClips || []).length} Clips`}
          items={trash.currentClips || []}
        >
          {(clip: any) => (
            <GridListItemWrapper>
              <SongRow
                contextType={ContextType.Library}
                contextId='trash'
                onClick={() => {}}
                onPlay={() => {
                  if (
                    queueStore.contextType === ContextType.Library &&
                    playbarStore.clip?.id === clip.id
                  ) {
                    playbarStore.togglePlay();
                  } else {
                    queueStore.setPlayContext({
                      clips: trash.currentClips || [],
                      currentIndex: (trash.currentClips || []).findIndex(
                        (c: Clip) => c.id === clip.id
                      ),
                      contextType: ContextType.Library,
                      contextId: 'trash',
                    });
                    playbarStore.playClip(clip);
                  }
                }}
                clip={clip}
                key={clip.id}
              />
            </GridListItemWrapper>
          )}
        </GridListWrapper>
      )}
    </div>
  );
});

export default TrashSongContent;