'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 ForYouPage = observer(() => {
  const { discover: discoverStore } = useStores();
  const [contextId, setContextId] = useState<string>('');

  usePageViewLog({
    actionName: 'PageViewed',
    componentContext: 'for-you',
  });

  const getForYouSongs = async () => {
    const data = await discoverStore.sectionUpdate({
      sectionName: 'new_songs_for_you',
    });
    const sectionData = data?.sections?.[0];
    setContextId(sectionData?.id || '');
    return sectionData?.items || [];
  };

  return (
    <SimpleSongListPage
      loadContent={getForYouSongs}
      title='For You'
      playlistId={'for-you'}
      contextId={contextId}
      contextType={ContextType.FeaturedFeed}
      isInfiniteScroll={false}
    />
  );
});

export default ForYouPage;