import styled from '@emotion/styled';
import { useCallback, useMemo } from 'react';

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

import ClipBrowserList from './ClipBrowserList';
import { TrashedClipRow } from './TrashedClipRow';
import TrashedFilters from './TrashedFilters';
import { getTrashedDefaultClipBrowserFilters } from './defaultClipBrowserFilters';
import { BooleanFilter, ClipBrowserFilters } from './types';
import { ClipBrowserContextProvider } from './useClipBrowser';

type TrashedClipsQueryParams = {
  is_liked?: boolean | null;
  is_public?: boolean | null;
  page?: number;
  page_size?: number;
  cursor?: string | null;
  limit?: number | null;
};

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 TrashedClipBrowser() {
  const { clips: clipsStore } = useStores();

  const getDefaultFilters = useCallback(() => {
    const defaultFilters = getTrashedDefaultClipBrowserFilters();
    return defaultFilters;
  }, []);

  const fetchClips = useMemo(
    () =>
      async ({
        cursor,
        limit,
        filters,
      }: {
        cursor?: string | null;
        limit: number;
        filters: Partial<ClipBrowserFilters>;
      }) => {
        const queryParams: TrashedClipsQueryParams = { limit };

        if (cursor) {
          queryParams.cursor = cursor;
        }

        // basic filters supported by trashed_v2
        const activeFilters = filters; // already processed by useClipBrowser
        if (activeFilters.liked === BooleanFilter.True) {
          queryParams.is_liked = true;
        } else if (activeFilters.liked === BooleanFilter.False) {
          queryParams.is_liked = false;
        }

        if (activeFilters.public === BooleanFilter.True) {
          queryParams.is_public = true;
        } else if (activeFilters.public === BooleanFilter.False) {
          queryParams.is_public = false;
        }

        const { data, error } = await clipsStore.apiClient.GET(
          '/api/clips/trashed_v2',
          {
            params: { query: queryParams },
          }
        );

        if (error) {
          console.error('Error fetching trashed clips', error);
          throw new Error(JSON.stringify(error));
        }

        return {
          clips: data?.clips || [],
          nextCursor: data?.next_cursor || null,
        };
      },
    [clipsStore.apiClient]
  );

  return (
    <ClipBrowserContextProvider
      getDefaultFilters={getDefaultFilters}
      endpointKey='trashed_v2'
      fetchClips={fetchClips}
      memorizeFilters={true}
    >
      <Wrapper>
        <TrashedFilters />
        <ListWrapper>
          <ClipBrowserList
            ListComponent={TrashedClipRow}
            hidePageControls={true}
          />
        </ListWrapper>
      </Wrapper>
    </ClipBrowserContextProvider>
  );
}