import styled from '@emotion/styled';
import { useSearchParams } from 'next/navigation';
import { useCallback } from 'react';

import { useStores } from '@/app/(root)/AppProviders';

import { LIBRARY_FILTER_KEYS } from '../library/constants';
import ClipBrowserList from './ClipBrowserList';
import { LibraryClipRow } from './LibraryClipRow';
import LibraryFilters from './LibraryFilters';
import { getLibraryDefaultClipBrowserFilters } from './defaultClipBrowserFilters';
import { BooleanFilter, ClipBrowserFilters } from './types';
import { ClipBrowserContextProvider } from './useClipBrowser';

const FILTER_MAPPING: Record<
  string,
  (value: boolean) => Partial<ClipBrowserFilters>
> = {
  liked: (val) => ({ liked: val ? BooleanFilter.True : BooleanFilter.False }),
  hide_disliked: (val) => ({
    disliked: val ? BooleanFilter.False : BooleanFilter.Any,
  }),
  public: (val) => ({
    public: val ? BooleanFilter.True : BooleanFilter.False,
  }),
  full_song: (val) => ({
    fullSong: val ? BooleanFilter.True : BooleanFilter.False,
  }),
  is_uploaded_audio: (val) => ({
    upload: val ? BooleanFilter.True : BooleanFilter.False,
  }),
  hide_gen_stems: (val) => ({
    stem: { presence: val ? BooleanFilter.False : BooleanFilter.Any },
  }),
  hide_studio_clips: (val) => ({
    fromStudioProject: {
      presence: val ? BooleanFilter.False : BooleanFilter.Any,
    },
  }),
  is_cover: (val) => ({
    cover: { presence: val ? BooleanFilter.True : BooleanFilter.False },
  }),
  is_extend: (val) => ({
    extend: { presence: val ? BooleanFilter.True : BooleanFilter.False },
  }),
  is_persona: (val) => ({
    persona: { presence: val ? BooleanFilter.True : BooleanFilter.False },
  }),
  is_upsample: (val) => ({
    remaster: { presence: val ? BooleanFilter.True : BooleanFilter.False },
  }),
};

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-foreground-primary);
`;

const ListWrapper = styled.div`
  display: contents;
  > * {
    padding: 0 16px;
  }
`;

export default function LibraryClipBrowser() {
  const { session } = useStores();
  const searchParams = useSearchParams();

  const getDefaultFilters = useCallback(() => {
    const userId = session.user?.id;
    if (!userId) {
      return getLibraryDefaultClipBrowserFilters('');
    }

    const baseFilters = getLibraryDefaultClipBrowserFilters(userId);
    const urlFilters: Partial<ClipBrowserFilters> = {};

    // parse url search params
    searchParams.forEach((value, key) => {
      if (LIBRARY_FILTER_KEYS.includes(key) && FILTER_MAPPING[key]) {
        const boolValue = value === 'true' || value === '1';
        Object.assign(urlFilters, FILTER_MAPPING[key](boolValue));
      }
    });

    if (Object.keys(urlFilters).length > 0) {
      return { ...baseFilters, ...urlFilters };
    }

    return baseFilters;
  }, [session.user?.id, searchParams]);

  return (
    <ClipBrowserContextProvider getDefaultFilters={getDefaultFilters}>
      <Wrapper>
        <LibraryFilters />
        <ListWrapper>
          <ClipBrowserList ListComponent={LibraryClipRow} />
        </ListWrapper>
      </Wrapper>
    </ClipBrowserContextProvider>
  );
}