import { observer } from 'mobx-react-lite';

import { useStores } from '@/app/(root)/AppProviders';
import { AudioDropdown } from '@/app/(root)/create/createV2/AudioDropdown';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import {
  IS_SUNO_SHORT_FILTER_KEY,
  LIBRARY_FILTER_KEYS,
  LIKED_FILTER_KEY,
  PUBLIC_FILTER_KEY,
} from '@/components/library/constants';
import Pagination from '@/components/tab/Pagination';
import { useBreakpointMd } from '@/hooks/useBreakpoint';
import {
  GlobeIcon,
  SearchIcon,
  ThumbsUpIcon,
  UploadIcon,
  VideoIcon,
} from '@/icons';
import { MAX_SEARCH_TERM_LEN, SEARCH_DEBOUNCE_DELAY } from '@/utils/constants';
import { isIOS, isMobileBrowser } from '@/utils/device';

import LibraryMultiSelectDropdownV2 from '../select/LibraryMultiSelectDropdownV2';

export const LibraryFilterButtons = observer(
  ({ isMobile }: { isMobile: boolean }) => {
    const { library, search, session } = useStores();

    const hasSearchTerm =
      !!search.librarySearchTerm && search.librarySearchTerm !== '';
    const buttonFilterConfig = {
      variant: ButtonVariant.Secondary,
      size: isMobile ? ButtonSize.Mini : ButtonSize.Small,
      shape: ButtonShape.Pill,
      disabled: hasSearchTerm,
      className: 'text-sm',
    };

    const updateFilters = ({
      filterKey,
      filterVal,
    }: {
      filterKey: (typeof LIBRARY_FILTER_KEYS)[number];
      filterVal: boolean;
    }) => {
      library.updateFilters({ [filterKey]: filterVal });

      if (typeof window !== 'undefined') {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has(filterKey) && !filterVal) {
          urlParams.delete(filterKey);
        } else if (filterVal) {
          urlParams.set(filterKey, filterVal.toString());
        }
        window.history.pushState({}, '', `?${urlParams.toString()}`);
      }
    };

    return (
      <div className='flex flex-row gap-2'>
        <Button
          {...buttonFilterConfig}
          icon={ThumbsUpIcon}
          onClick={() => {
            updateFilters({
              filterKey: LIKED_FILTER_KEY,
              filterVal: !library.filters.clips.liked,
            });
          }}
          active={library.filters.clips.liked}
        >
          Liked
        </Button>
        <Button
          {...buttonFilterConfig}
          icon={GlobeIcon}
          onClick={() => {
            updateFilters({
              filterKey: PUBLIC_FILTER_KEY,
              filterVal: !library.filters.clips.public,
            });
          }}
          active={library.filters.clips.public}
        >
          Public
        </Button>
        {session?.flags?.['video-to-song'] &&
          session?.flags?.['image-to-song'] &&
          (isIOS() || !isMobileBrowser()) && (
            <Button
              {...buttonFilterConfig}
              icon={VideoIcon}
              onClick={() => {
                updateFilters({
                  filterKey: IS_SUNO_SHORT_FILTER_KEY,
                  filterVal: !library.filters.clips.is_suno_short,
                });
              }}
              active={library.filters.clips.is_suno_short}
            >
              Scenes
            </Button>
          )}
      </div>
    );
  }
);

export const LibraryFilters = observer(() => {
  const { library, search } = useStores();

  const isMobile = !useBreakpointMd();
  let searchTimeout: ReturnType<typeof setTimeout> | null;

  return (
    <div className='flex flex-1 flex-col'>
      <div className='flex flex-1 flex-row'>
        <div className='m-0 flex flex-1 flex-row items-center'>
          <LibraryMultiSelectDropdownV2 library={library} />
          {!isMobile && (
            <div className='ml-6 hidden flex-1 md:flex'>
              <span className='mt-3 -mr-12 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 text-foreground-primary placeholder-foreground-secondary outline-none'
                onChange={(e: any) => {
                  if (searchTimeout != null) {
                    clearTimeout(searchTimeout);
                    searchTimeout = null;
                  }
                  searchTimeout = setTimeout(() => {
                    const term = e.target.value
                      .trim()
                      .substring(0, MAX_SEARCH_TERM_LEN);
                    search.librarySearchTerm = term;
                    library.updateFilters({
                      ...library.filters.clips,
                      query: term,
                      page: 0,
                    });
                  }, SEARCH_DEBOUNCE_DELAY);
                }}
                defaultValue={search.librarySearchTerm}
              />
            </div>
          )}
        </div>

        <div className='ml-4 flex flex-row-reverse items-center gap-2'>
          <Pagination
            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}
          />
          <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 />
                  <span className='text-md whitespace-nowrap'>
                    Upload Audio
                  </span>
                </div>
              </Button>
            )}
          />
        </div>
      </div>

      {isMobile && (
        <div className='flex flex-1 pr-4 pl-2'>
          <span className='mt-3 -mr-12 ml-8'>
            <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-secondary bg-transparent pl-12 font-sans placeholder-foreground-primary outline-none'
            onChange={(e: any) => {
              if (searchTimeout != null) {
                clearTimeout(searchTimeout);
                searchTimeout = null;
              }
              searchTimeout = setTimeout(() => {
                const term = e.target.value
                  .trim()
                  .substring(0, MAX_SEARCH_TERM_LEN);
                search.librarySearchTerm = term;
                library.updateFilters({
                  ...library.filters.clips,
                  query: term,
                  page: 0,
                });
              }, SEARCH_DEBOUNCE_DELAY);
            }}
          />
        </div>
      )}
    </div>
  );
});

export default LibraryFilters;