import { observer } from 'mobx-react-lite';
import { useRouter } from 'next/navigation';
import React, { useMemo, useRef } from 'react';

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

import { CreateSongRow } from '../songPokemon/SongPokemon';

interface ProjectSongRowsProps {
  pageClips: Clip[];
  songsRef: React.RefObject<HTMLDivElement | null>;
  imagesOnly: boolean;
}

const ProjectSongRows: React.FC<ProjectSongRowsProps> = observer(
  ({ pageClips, songsRef, imagesOnly }) => {
    const {
      genForm,
      createV2,
      playbar,
      edit,
      project,
      menus,
      queue: queueStore,
      session,
    } = useStores();
    const router = useRouter();
    const clip1OnboardingRef = useRef<any>(null);

    const playContext = useMemo(() => {
      return {
        contextType: ContextType.Workspace,
        contextId: project.currentProjectId,
        clips: pageClips,
      };
    }, [pageClips]);

    const items = useMemo(() => {
      return (
        pageClips?.map((c) => ({
          id: c.id,
          clip: c,
          imageOnly: imagesOnly,
        })) || []
      );
    }, [pageClips, imagesOnly]);

    return (
      <>
        {edit.pendingClipData.filter(
          (pendingClip) =>
            pendingClip.projectId === project.userSelectedProjectId
        ) &&
          edit.pendingClipData.map((pendingClip: any) => (
            <SongRow
              expanded={true}
              showStats={false}
              selected={false}
              key={pendingClip.actionClipId}
              clip={pendingClip}
              onClick={() => {}}
              onPlay={() => {}}
              isLoading
            />
          ))}
        {createV2.audioUploadStatus === AudioUploadStatus.UPLOADING &&
        createV2.audioUploadPendingProjectId === project.currentProjectId &&
        project.currentPage === 0 ? (
          <SongRow
            expanded={true}
            showStats={false}
            selected={false}
            key={'pending-upload-clip'}
            clip={
              {
                title: createV2.audioUploadPendingClip?.title ?? 'Untitled',
                metadata: {},
              } as Clip
            }
            onClick={() => {}}
            onPlay={() => {}}
            isLoading
          />
        ) : null}
        <GridListWrapper
          aria-label={`${pageClips?.length || 0} Clips`}
          items={items}
        >
          {({ clip, imageOnly }: { clip: Clip; imageOnly: boolean }) => (
            <GridListItemWrapper aria-label={clip.title || 'Untitled Clip'}>
              {!session.flags?.['song-rows-2025'] ? (
                <SongRow
                  ref={
                    pageClips?.length === 2 &&
                    clip.id === pageClips[pageClips.length - 1]?.id
                      ? clip1OnboardingRef
                      : undefined
                  }
                  imageOnly={imageOnly}
                  expanded={true}
                  showStats={false}
                  selected={[...(menus.selected || [])].includes(clip.id)}
                  focusedClip={genForm.selectedClip as Clip}
                  key={clip.id}
                  clip={clip}
                  contextType={ContextType.Workspace}
                  contextId={
                    project.userSelectedProjectId ||
                    'SONG_ROW_MISSING_PROJECT_ID'
                  }
                  enablePin={
                    project.userSelectedProjectId !== DEFAULT_PROJECT_ID
                  }
                  onPinClipToProject={() => {
                    if (
                      project.userSelectedProjectId &&
                      project.userSelectedProjectId !== DEFAULT_PROJECT_ID
                    ) {
                      project.pinClipToProject(
                        [clip],
                        project.userSelectedProjectId,
                        !project.isPinned(clip.id)
                      );
                    }
                  }}
                  onClick={() => {}}
                  onPlay={() => {
                    if (
                      queueStore.contextType === ContextType.Workspace &&
                      queueStore.contextId ===
                        (project.userSelectedProjectId || '') &&
                      playbar.clip?.id === clip.id
                    ) {
                      playbar.togglePlay();
                      return;
                    }
                    queueStore.setPlayContext({
                      contextType: ContextType.Workspace,
                      contextId:
                        project.userSelectedProjectId ||
                        'SONG_ROW_MISSING_PROJECT_ID',
                      currentIndex:
                        pageClips?.findIndex((c: Clip) => c.id === clip.id) ||
                        0,
                      clips: pageClips || [],
                    });
                    playbar.playClip(clip);
                  }}
                  onTriggerEditMode={() => {
                    const songsScrollPosition = songsRef.current?.scrollTop;
                    edit.resetEditState();
                    edit.setExitEditModeCallback(() => {
                      edit.setPendingScrollPositionChange({
                        page: 'create',
                        scrollPosition: songsScrollPosition || 0,
                      });
                      router.push(
                        `/create/?wid=${project.userSelectedProjectId}`
                      );
                    });
                  }}
                  isCreatePage
                />
              ) : (
                <CreateSongRow playContext={playContext} clipId={clip.id} />
              )}
            </GridListItemWrapper>
          )}
        </GridListWrapper>
      </>
    );
  }
);

export default ProjectSongRows;