'use client';

import { observer } from 'mobx-react-lite';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useInView } from 'react-intersection-observer';

import ListItem from '@/components/listView/ListItem';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import useActivityFeed from '@/hooks/useActivityFeed';
import { components } from '@/lib/gen';

import { ActivityFeedItem } from './ActivityFeedItem';

type FollowingFeedItemSchema = components['schemas']['FollowingFeedItemSchema'];

const ActivityFeedList: React.FC<{
  showFullFeed?: boolean;
}> = observer(({ showFullFeed = false }) => {
  const { t } = useTranslation();

  const {
    activityFeedItems = [],
    isLoading,
    hasMore,
    isLoadingMore,
    onLoadMore,
  } = useActivityFeed({ showFullFeed });

  const feedItems = useMemo(() => activityFeedItems, [activityFeedItems]);

  // Replace the manual intersection observer with useInView
  const { ref: paginationRef } = useInView({
    onChange: (inView) => {
      if (inView && !isLoading && !isLoadingMore && hasMore && onLoadMore) {
        onLoadMore();
      }
    },
  });

  return isLoading ? (
    <ListItem className='border-b-0'>
      <p className='grow text-center'>
        {isLoading ? (
          <SpinnerSVG className='inline-block' />
        ) : (
          t('notification.emptyState')
        )}
      </p>
    </ListItem>
  ) : (
    <>
      {feedItems.map((item: FollowingFeedItemSchema, index: number) => (
        <ActivityFeedItem
          data={item}
          key={item.activity_type + item.feed_timestamp}
          showFullFeed={showFullFeed}
          index={index}
        />
      ))}
      {/* Invisible load more sentinel */}
      {showFullFeed && (
        <div ref={paginationRef} className='h-px' aria-hidden='true' />
      )}
      {/* Loading indicator or end of list indicator */}
      {showFullFeed && (
        <div className='pt-4 text-center'>
          {isLoadingMore ? (
            <SpinnerSVG className='inline-block' />
          ) : (
            !hasMore &&
            feedItems.length > 0 && (
              <div className='relative pt-4'>
                <div className='pointer-events-none absolute inset-0' />
                <p className='relative text-sm text-foreground-secondary/50'>
                  No more activity
                </p>
              </div>
            )
          )}
        </div>
      )}
    </>
  );
});

export default ActivityFeedList;