import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
import { FlatList, View } from 'react-native';
import { RefreshControl } from 'react-native';
import AmityPostContentComponent from '../../../post/components/Content/Content';
import { ComponentID } from '../../../../enums/enumUIKitID';
import { useAmityComponent } from '../../../../hooks/useUiKitReference';
import { AmityPostContentComponentStyleEnum } from '../../../../enums/AmityPostContentComponentStyle';
import AmityStoryTabComponent from '../../../story/components/Tab/Tab';
import { AmityStoryTabComponentEnum } from '../../../../types';
import { usePostImpression } from '../../../../hooks/usePostImpression';
import { useStyle } from './styles';
import { isAmityAd } from '../../../../hooks/useCustomRankingGlobalFeed';
import PostAdComponent from '../../../../components/PostAdComponent/PostAdComponent';
import Divider from '../../../../components/Divider';
export const globalFeedPageLimit = 20;
const AmityGlobalFeedComponent = ({
  pageId,
  isShowStoryTab = true,
  GlobalFeedHeaderComponent,
  itemWithAds,
  refresh,
  loading,
  onNextPage
}) => {
  const componentId = ComponentID.global_feed_component;
  const {
    isExcluded,
    accessibilityId
  } = useAmityComponent({
    pageId,
    componentId
  });
  const [refreshing, setRefreshing] = useState(false);
  const styles = useStyle();
  const flatListRef = useRef(null);
  const handleLoadMore = () => {
    if (loading || !onNextPage) return;
    onNextPage === null || onNextPage === void 0 || onNextPage();
  };
  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await refresh();
    setRefreshing(false);
  }, [refresh]);
  const {
    handleViewChange
  } = usePostImpression(itemWithAds === null || itemWithAds === void 0 ? void 0 : itemWithAds.filter(item => isAmityAd(item) ? item === null || item === void 0 ? void 0 : item.adId : item === null || item === void 0 ? void 0 : item.postId));
  const viewabilityConfig = useRef({
    viewAreaCoveragePercentThreshold: 60
  }).current;
  const listHeaderComponent = useMemo(() => {
    if (isShowStoryTab) {
      return /*#__PURE__*/React.createElement(View, null, GlobalFeedHeaderComponent, /*#__PURE__*/React.createElement(AmityStoryTabComponent, {
        type: AmityStoryTabComponentEnum.globalFeed
      }));
    }
    return GlobalFeedHeaderComponent || null;
  }, [isShowStoryTab, GlobalFeedHeaderComponent]);
  if (isExcluded) return null;
  return /*#__PURE__*/React.createElement(FlatList, {
    initialNumToRender: 20,
    testID: accessibilityId,
    accessibilityLabel: accessibilityId,
    style: styles.feedWrap,
    data: itemWithAds,
    renderItem: ({
      item,
      index
    }) => {
      return /*#__PURE__*/React.createElement(React.Fragment, null, index !== 0 && /*#__PURE__*/React.createElement(Divider, null), isAmityAd(item) ? /*#__PURE__*/React.createElement(PostAdComponent, {
        ad: item
      }) : /*#__PURE__*/React.createElement(AmityPostContentComponent, {
        post: item,
        AmityPostContentComponentStyle: AmityPostContentComponentStyleEnum.feed
      }));
    },
    keyExtractor: (item, index) => isAmityAd(item) ? item.adId.toString() + '_' + index : item.postId.toString() + '_' + index,
    onEndReachedThreshold: 0.5,
    onEndReached: handleLoadMore,
    ref: flatListRef,
    refreshControl: /*#__PURE__*/React.createElement(RefreshControl, {
      refreshing: refreshing,
      onRefresh: onRefresh,
      colors: ['lightblue'],
      tintColor: "lightblue"
    }),
    keyboardShouldPersistTaps: "handled",
    ListHeaderComponent: listHeaderComponent,
    viewabilityConfig: viewabilityConfig,
    onViewableItemsChanged: handleViewChange,
    extraData: itemWithAds
  });
};
export default /*#__PURE__*/memo(AmityGlobalFeedComponent);
//# sourceMappingURL=GlobalFeed.js.map