'use client';

import { observer } from 'mobx-react-lite';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useContext, useEffect, useRef } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import DesktopLibrary from '@/components/library/DesktopLibrary';
import { LibraryContent } from '@/components/library/LibraryContent';
import { LIBRARY_FILTER_KEYS } from '@/components/library/constants';
import usePageViewLog from '@/hooks/usePageViewLog';
import { LibraryTab } from '@/logging/eventTypes/PageViewedEventType';
import {
  handleRemixCoverAction,
  handleRemixExtendAction,
} from '@/utils/remixUtils';

import UploadModalV2 from '../create/sandbox/UploadModalV2';
import UploadStateContext from '../create/uploaderV2/UploadStateContext';
import { AudioActions } from '../create/v2/types';

const LibraryClient = observer<any>(
  ({ initialTabKey = 'songs' }: { initialTabKey?: LibraryTab }) => {
    const { library, session, clips, genForm, createV2 } = useStores();
    const { isRecordingMode } = useContext(UploadStateContext);
    const router = useRouter();
    const pathname = usePathname();
    const libraryRef = useRef<HTMLDivElement>(null);

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

    usePageViewLog({
      actionName: 'PageViewed',
      componentContext: 'library',
      context: { tab: initialTabKey },
    });

    const searchParams = useSearchParams();

    useEffect(() => {
      if (initialTabKey === 'songs') {
        const filters: Record<string, boolean> = {};
        searchParams.forEach((value, key) => {
          if (LIBRARY_FILTER_KEYS.includes(key)) {
            filters[key] = Boolean(value);
          }
        });
        if (Object.keys(filters).length > 0) {
          library.updateFilters(filters);
        }
      }
    }, []);

    return (
      <>
        <div className={`block h-full w-full overflow-y-scroll md:hidden`}>
          <LibraryContent libraryRef={libraryRef} tabKey={initialTabKey} />
        </div>
        <div className='hidden h-full w-full md:flex'>
          <DesktopLibrary
            libraryRef={libraryRef}
            initialTabKey={initialTabKey}
          />
        </div>
        <UploadModalV2
          isRecordingMode={isRecordingMode}
          onClipInitialized={(
            clipId: string,
            initializationCondition: AudioActions | null
          ) => {
            if (clipId && clips.clipById[clipId]) {
              const audioUploadPendingClip = clips.clipById[clipId];
              const props = {
                clip: audioUploadPendingClip,
                session,
                genForm,
                createV2,
                router,
                pathname,
                showRemixCreate: true,
              };
              const audioActionFn: any = {
                [AudioActions.COVER]: handleRemixCoverAction,
                [AudioActions.EXTEND]: handleRemixExtendAction,
                [AudioActions.SAVE]: null,
              }[initializationCondition ?? AudioActions.SAVE];
              if (audioActionFn) {
                audioActionFn(props);
              }
            }
          }}
        />
      </>
    );
  }
);

export default LibraryClient;