import { useQuery } from '@tanstack/react-query';
import { observer } from 'mobx-react-lite';
import { useCallback, useMemo, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import FeedItemList, {
  FeedItem,
  FeedItemListProps,
} from '@/components/feed/FeedItemList';
import {
  TRENDING_LANGUAGE_OPTIONS,
  TRENDING_TIME_OPTIONS,
} from '@/components/filters/constants';
import logWebUserEvent from '@/logging/logWebUserEvent';

export const TrendingFeedItemList = observer((props: FeedItemListProps) => {
  const { feedItems, title, link, id, index, ...restProps } = props;
  const { discover: discoverStore } = useStores();

  const [selectedLanguage, setSelectedLanguage] = useState<
    string | undefined
  >();

  const [selectedRankBy, setSelectedRankBy] = useState<string | undefined>();
  // dynamically set contextId here to correctly update the autoplay context in SongFeedItem
  const contextId = `${id}-${selectedLanguage}-${selectedRankBy}`;

  const updateSelectedLanguage = useCallback(
    (language?: string) => {
      setSelectedLanguage(language);
      logWebUserEvent({
        actionName: 'FeaturedFeedFilterClicked',
        principalObjectType: 'featured_feed_list',
        principalObjectValue: id,
        context: {
          index: index,
          sectionTitle: title,
          sectionContextId: contextId,
          filterName: 'language',
          filterValue: language || '',
        },
      });
    },
    [index, title, id, contextId]
  );

  const updateSelectedRankBy = useCallback(
    (rankBy?: string) => {
      setSelectedRankBy(rankBy);
      logWebUserEvent({
        actionName: 'FeaturedFeedFilterClicked',
        principalObjectType: 'featured_feed_list',
        principalObjectValue: id,
        context: {
          index: index,
          sectionTitle: title,
          sectionContextId: contextId,
          filterName: 'rankBy',
          filterValue: rankBy || '',
        },
      });
    },
    [index, title, id, contextId]
  );

  const { data, isLoading, isFetching } = useQuery({
    queryKey: [title, selectedLanguage, selectedRankBy],
    queryFn: async () => {
      const response = await discoverStore.sectionUpdate({
        sectionName: 'trending_songs',
        sectionContent: selectedLanguage,
        secondarySectionContent: selectedRankBy,
        page: 1,
        sectionSize: 20,
      });
      const trendingSection = response?.sections?.[0];
      setSelectedLanguage(trendingSection?.selected_option || undefined);
      setSelectedRankBy(
        trendingSection?.secondary_selected_option || undefined
      );
      return (trendingSection?.items || []).slice(0, 5) as FeedItem[];
    },
    refetchOnMount: true,
  });

  const filterConfig = useMemo(() => {
    return [
      {
        // using a constant here until we can fetch this from the featured feed api response
        options: TRENDING_LANGUAGE_OPTIONS,
        onChange: updateSelectedLanguage,
        initialSelection: selectedLanguage,
        key: 'language',
      },
      {
        options: TRENDING_TIME_OPTIONS,
        onChange: updateSelectedRankBy,
        initialSelection: selectedRankBy,
        key: 'rankBy',
      },
    ];
  }, [
    updateSelectedLanguage,
    updateSelectedRankBy,
    selectedLanguage,
    selectedRankBy,
  ]);

  return (
    <FeedItemList
      index={index}
      id={id}
      contextId={contextId}
      feedItems={data || []}
      title={title}
      link={link}
      filterConfig={filterConfig}
      isLoading={isLoading || isFetching || !data}
      {...restProps}
    />
  );
});

export default TrendingFeedItemList;