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

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

import ClipBrowserList from './ClipBrowserList';
import { LibraryClipRow } from './LibraryClipRow';
import { getHistoryDefaultClipBrowserFilters } from './defaultClipBrowserFilters';
import { ClipBrowserFilters } from './types';
import { ClipBrowserContextProvider } from './useClipBrowser';

type HistoryQueryParams = {
  cursor?: string | null;
  limit?: number;
};

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

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

  const fetchClips = useMemo(
    () =>
      async ({
        cursor,
        limit,
        filters, // eslint-disable-line @typescript-eslint/no-unused-vars
      }: {
        cursor?: string | null;
        limit: number;
        filters: Partial<ClipBrowserFilters>;
      }) => {
        const queryParams: HistoryQueryParams = { limit };

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

        const { data, error } = await clipsStore.apiClient.GET(
          '/api/profiles/listen-history',
          {
            params: { query: queryParams },
          }
        );

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

        // extract just clips from the history response, exclude playlists (BE refact needed)
        const clips = (data?.history
          ?.map((item) => item?.content)
          .filter((content) => content?.entity_type === 'song_schema') ||
          []) as Clip[];

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

  return (
    <ClipBrowserContextProvider
      getDefaultFilters={getDefaultFilters}
      endpointKey='listen-history'
      fetchClips={fetchClips}
      memorizeFilters={false}
    >
      <Wrapper>
        <ListWrapper>
          <ClipBrowserList
            ListComponent={LibraryClipRow}
            hidePageControls={true}
          />
        </ListWrapper>
      </Wrapper>
    </ClipBrowserContextProvider>
  );
}