import { observer } from 'mobx-react-lite';
import { useRouter } from 'next/navigation';
import { RefObject } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { AudioDropdown } from '@/app/(root)/create/createV2/AudioDropdown';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import {
  GridListItemWrapper,
  GridListWrapper,
} from '@/components/grid/GridListUtils';
// import { LibraryFilterButtons } from '@/components/library/LibraryFilters';
import SongRow from '@/components/song/SongRow';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import Pagination from '@/components/tab/Pagination';
import { useLibraryClips } from '@/hooks/useLibraryClips';
import { CreateIcon, SearchIcon, TrashIcon, UploadIcon } from '@/icons';
import { ContextType } from '@/logging/contextTypes';
import { Clip } from '@/state/clipStore';
import { MAX_SEARCH_TERM_LEN, SEARCH_DEBOUNCE_DELAY } from '@/utils/constants';

import LibraryMultiSelectDropdownV2 from '../select/LibraryMultiSelectDropdownV2';
import { LibraryFilterButtons } from './LibraryFilters';

export const MobileLibraryClips = observer(
  ({ libraryRef }: { libraryRef: RefObject<HTMLDivElement | null> }) => {
    const { library, queue, playbar, search, menus, session } = useStores();
    const router = useRouter();

    let searchTimeout: ReturnType<typeof setTimeout> | null;

    // Pagination props common to both instances
    const paginationProps = {
      page: library.filters.clips.page,
      onDecrementPage: () => {
        if (library.filters.clips.page > 0) library.incrementPage(-1);
      },
      onIncrementPage: () => {
        if (library.hasMoreClips) library.incrementPage(1);
      },
      setPageNumber: library.setPageNumber,
      maxPages: undefined,
      disableLeft: library.filters.clips.page === 0,
      disableRight: !library.hasMoreClips,
    };

    // Handle search input changes
    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      if (searchTimeout != null) {
        clearTimeout(searchTimeout);
        searchTimeout = null;
      }
      searchTimeout = setTimeout(() => {
        const term = e.target.value.trim().substring(0, MAX_SEARCH_TERM_LEN);
        library.updateFilters({
          ...library.filters.clips,
          query: term,
          page: 0,
        });
        search.librarySearchTerm = term;
      }, SEARCH_DEBOUNCE_DELAY);
    };

    const { isLoading } = useLibraryClips();

    return (
      <>
        <div className='flex flex-col md:flex-row'>
          <div className='flex flex-1 flex-col'>
            {/* Header section */}
            <div className='flex py-2 pr-3 pl-6 md:py-6'>
              <div className='flex w-full items-center'>
                <div className='flex w-full justify-between'>
                  {session.flags?.['library-filters-v2'] ? (
                    <LibraryMultiSelectDropdownV2 library={library} />
                  ) : (
                    <LibraryFilterButtons isMobile={true} />
                  )}
                  <div className='flex flex-row gap-1'>
                    <AudioDropdown
                      renderTriggerButton={(callback, ref) => (
                        <Button
                          ref={ref}
                          shape={ButtonShape.Pill}
                          aria-label='Upload Audio'
                          variant={ButtonVariant.Standard}
                          size={ButtonSize.Mini}
                          onClick={callback}
                        >
                          <div className='flex h-full w-full items-center justify-center'>
                            <UploadIcon className='h-4 w-4' />
                          </div>
                        </Button>
                      )}
                    />
                    <Button
                      variant={ButtonVariant.Standard}
                      size={ButtonSize.Small}
                      shape={ButtonShape.Pill}
                      onClick={() => router.push('/me/trash/')}
                      icon={TrashIcon}
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* Search and pagination section */}
            <div className='mr-2 mb-4 flex items-center justify-between gap-2'>
              <div className='flex flex-1 pl-2'>
                <span className='mt-3 -mr-12 ml-8 text-foreground-secondary'>
                  <SearchIcon />
                </span>
                <input
                  type='text'
                  placeholder='Search by song name or style'
                  className='placeholder-opacity-50 ml-4 h-10 w-full max-w-[400px] rounded-full border border-border-primary bg-transparent pl-12 font-sans outline-none'
                  onChange={handleSearchChange}
                />
              </div>
              <Pagination {...paginationProps} />
            </div>
          </div>
        </div>
        <div className='ml-4 flex-1' ref={libraryRef}>
          {isLoading ? (
            <div className='flex items-center justify-center pt-[60px]'>
              <SpinnerSVG />
            </div>
          ) : library.currentClips?.length === 0 ? (
            <div className='flex flex-col justify-center px-6'>
              <p>No songs matching filters.</p>
              <Button
                variant={ButtonVariant.Primary}
                size={ButtonSize.Medium}
                shape={ButtonShape.Pill}
                className='mt-4 w-fit'
                onClick={() => {
                  router.push(`/create`);
                }}
                icon={CreateIcon}
              >
                Create Song
              </Button>
            </div>
          ) : (
            <GridListWrapper
              aria-label={`${(library.currentClips || []).length} Clips`}
              items={library.currentClips || []}
            >
              {(clip) => {
                return (
                  <GridListItemWrapper>
                    <SongRow
                      key={clip.id}
                      contextType={ContextType.Library}
                      contextId='library'
                      onClick={() => {}}
                      selected={[...(menus.selected || [])].includes(clip.id)}
                      onPlay={() => {
                        if (
                          queue.contextType === ContextType.Library &&
                          queue.contextId === 'library' &&
                          playbar.clip?.id === clip.id
                        ) {
                          playbar.togglePlay();
                          return;
                        }
                        queue.setPlayContext({
                          clips: library.currentClips || [],
                          currentIndex: (library.currentClips || []).findIndex(
                            (c: Clip) => c.id === clip.id
                          ),
                          contextType: ContextType.Library,
                          contextId: 'library',
                        });
                        playbar.playClip(clip);
                      }}
                      clip={clip}
                    />
                  </GridListItemWrapper>
                );
              }}
            </GridListWrapper>
          )}
        </div>

        {/* Bottom pagination */}
        <div className='inset-x-0 flex h-[60px] w-full justify-center pt-2'>
          <Pagination {...paginationProps} />
        </div>
      </>
    );
  }
);

export default MobileLibraryClips;