WhatsHappeningSection.tsx

import React, {
  forwardRef,
  useCallback,
  useImperativeHandle,
  useRef,
} from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { useSelector } from 'react-redux';
import { useNavigation } from '@react-navigation/native';
import { useTailwind } from '@metamask/design-system-twrnc-preset';
import { TextVariant } from '@metamask/design-system-react-native';
import SectionHeader from '../../../../../component-library/components-temp/SectionHeader';
import ErrorState from '../../components/ErrorState';
import ViewMoreCard from '../../components/ViewMoreCard';
import { SectionRefreshHandle } from '../../types';
import { selectWhatsHappeningEnabled } from '../../../../../selectors/featureFlagController/whatsHappening';
import { strings } from '../../../../../../locales/i18n';
import Routes from '../../../../../constants/navigation/Routes';
import { MAX_ITEMS_DISPLAYED, WhatsHappeningEntryPoint } from './constants';
import { useWhatsHappening } from './hooks';
import { WhatsHappeningCard, WhatsHappeningCardSkeleton } from './components';
import useHomeViewedEvent, {
  HomeSectionNames,
} from '../../hooks/useHomeViewedEvent';
import { useSectionPerformance } from '../../hooks/useSectionPerformance';
import { WalletViewSelectorsIDs } from '../../../Wallet/WalletView.testIds';
import { MetaMetricsEvents } from '../../../../../core/Analytics';
import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
import { getWhatsHappeningEventProps } from './eventProperties';

const CARD_WIDTH = 280;
const GAP = 12;

const SNAP_OFFSETS = Array.from(
  { length: MAX_ITEMS_DISPLAYED },
  (_, i) => i * (CARD_WIDTH + GAP),
);

const SKELETON_KEYS = Array.from(
  { length: MAX_ITEMS_DISPLAYED },
  (__, i) => `skeleton-${i}`,
);

const styles = StyleSheet.create({
  sectionGap: { gap: 12 },
});

interface WhatsHappeningSectionProps {
  sectionIndex: number;
  totalSectionsLoaded: number;
}

const WhatsHappeningSection = forwardRef<
  SectionRefreshHandle,
  WhatsHappeningSectionProps
>(({ sectionIndex, totalSectionsLoaded }, ref) => {
  const sectionViewRef = useRef<View>(null);
  const tw = useTailwind();
  const navigation = useNavigation();
  const isEnabled = useSelector(selectWhatsHappeningEnabled);
  const title = strings('homepage.sections.whats_happening');
  const { trackEvent, createEventBuilder } = useAnalytics();

  const { items, isLoading, error, refresh } =
    useWhatsHappening(MAX_ITEMS_DISPLAYED);

  useImperativeHandle(ref, () => ({ refresh }), [refresh]);

  const hasError = !isLoading && items.length === 0 && !!error;

  // Pass the real ref only when the section actually mounts a View (has items
  // or is showing the error state). When false, sectionRef: null triggers the
  // hook's immediate-fire path once loading completes, so the event still fires
  // for the truly-empty state (no items, no error) with isEmpty: true.
  const willRender = !isLoading && (items.length > 0 || hasError);

  const { onLayout } = useHomeViewedEvent({
    sectionRef: willRender ? sectionViewRef : null,
    isLoading,
    sectionName: HomeSectionNames.WHATS_HAPPENING,
    sectionIndex,
    totalSectionsLoaded,
    isEmpty: items.length === 0,
    itemCount: items.length,
  });

  useSectionPerformance({
    sectionId: HomeSectionNames.WHATS_HAPPENING,
    contentReady: willRender,
    isEmpty: items.length === 0,
    isLoading,
    enabled: isEnabled,
  });

  const navigateToDetail = useCallback(
    (initialIndex: number) => {
      navigation.navigate(Routes.WHATS_HAPPENING_DETAIL, {
        initialIndex,
      });
    },
    [navigation],
  );

  const handleViewAll = useCallback(() => {
    trackEvent(
      createEventBuilder(MetaMetricsEvents.WHATS_HAPPENING_OPENED)
        .addProperties({ entry_point: WhatsHappeningEntryPoint.ViewAll })
        .build(),
    );
    navigateToDetail(0);
  }, [navigateToDetail, trackEvent, createEventBuilder]);

  const handleCardPress = useCallback(
    (index: number) => {
      const item = items[index];
      if (item) {
        trackEvent(
          createEventBuilder(MetaMetricsEvents.WHATS_HAPPENING_OPENED)
            .addProperties({
              ...getWhatsHappeningEventProps(item, index),
              entry_point: WhatsHappeningEntryPoint.Card,
            })
            .build(),
        );
      }
      navigateToDetail(index);
    },
    [items, navigateToDetail, trackEvent, createEventBuilder],
  );

  if (!isEnabled) {
    return null;
  }

  if (hasError) {
    return (
      <View ref={sectionViewRef} onLayout={onLayout} style={styles.sectionGap}>
        <SectionHeader
          title={title}
          onPress={handleViewAll}
          testID={WalletViewSelectorsIDs.HOMEPAGE_SECTION_TITLE(
            'whats-happening',
          )}
        />
        <ErrorState
          title={strings('homepage.error.unable_to_load', {
            section: title.toLowerCase(),
          })}
          onRetry={refresh}
        />
      </View>
    );
  }

  if (!isLoading && items.length === 0) {
    return null;
  }

  return (
    <View ref={sectionViewRef} onLayout={onLayout} style={styles.sectionGap}>
      <SectionHeader
        title={title}
        onPress={handleViewAll}
        testID={WalletViewSelectorsIDs.HOMEPAGE_SECTION_TITLE(
          'whats-happening',
        )}
      />
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={tw.style('px-4 gap-3')}
        snapToOffsets={SNAP_OFFSETS}
        decelerationRate="fast"
        testID="homepage-whats-happening-carousel"
      >
        {isLoading ? (
          SKELETON_KEYS.map((key) => <WhatsHappeningCardSkeleton key={key} />)
        ) : (
          <>
            {items.map((item, index) => (
              <WhatsHappeningCard
                key={item.id}
                item={item}
                cardIndex={index}
                onPress={() => handleCardPress(index)}
              />
            ))}
            <ViewMoreCard
              onPress={handleViewAll}
              twClassName="w-[180px] h-[254px]"
              textVariant={TextVariant.BodyLg}
            />
          </>
        )}
      </ScrollView>
    </View>
  );
});

export default WhatsHappeningSection;