'use client';

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

import { useStores } from '@/app/(root)/AppProviders';
import SimpleSongListPage from '@/components/song/SimpleSongListPage';
import usePageViewLog from '@/hooks/usePageViewLog';
import { ContextType } from '@/logging/contextTypes';

const TrendingPage = observer(() => {
  const { discover: discoverStore } = useStores();
  const [languageOptions, setLanguageOptions] = useState<string[]>([]);
  const [rankByOptions, setRankByOptions] = useState<string[]>([]);
  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
  const [selectedRankBy, setSelectedRankBy] = useState<string | null>(null);
  const [contextId, setContextId] = useState<string>('');

  usePageViewLog({
    actionName: 'PageViewed',
    componentContext: 'trending',
  });

  const getTrendingSongs = async ({
    language,
    rankBy,
  }: {
    language: string | null;
    rankBy: string | null;
  }) => {
    const data = await discoverStore.sectionUpdate({
      sectionName: 'trending_songs',
      sectionContent: language,
      secondarySectionContent: rankBy,
      page: 1,
      sectionSize: 50,
      disableShuffle: true,
    });
    const trendingInfo = data?.sections?.[0];
    setLanguageOptions(trendingInfo?.options || []);
    setRankByOptions(trendingInfo?.secondary_options || []);
    setSelectedLanguage(trendingInfo?.selected_option || null);
    setSelectedRankBy(trendingInfo?.secondary_selected_option || null);
    setContextId(trendingInfo?.id || '');
    return trendingInfo?.items || [];
  };

  return (
    <SimpleSongListPage
      loadContent={() =>
        getTrendingSongs({
          language: selectedLanguage,
          rankBy: selectedRankBy,
        })
      }
      title='Trending'
      playlistId={'trending'}
      contextId={contextId}
      contextType={ContextType.FeaturedFeed}
      filterConfig={[
        {
          options: languageOptions,
          onChange: setSelectedLanguage,
          key: 'language',
        },
        {
          options: rankByOptions,
          onChange: setSelectedRankBy,
          key: 'rankBy',
        },
      ]}
      filterValues={['ordered', selectedLanguage, selectedRankBy]}
      isInfiniteScroll={false}
    />
  );
});

export default TrendingPage;