import { View, FlatList, TouchableOpacity, Pressable } from 'react-native';
import { memo, useCallback } from 'react';
import { useStyles } from './styles';
import { PageID } from '../../enums';
import { useAmityPage, useCommunities } from '../../hooks';
import BackButtonIconElement from '../../elements/BackButtonIconElement/BackButtonIconElement';
import CategoryTitle from '../../elements/CategoryTitle/CategoryTitle';
import CommunityRowItem from '../../components/CommunityRowItem/CommunityRowItem';
import { useNavigation } from '@react-navigation/native';
import CommunityEmptyTitle from '../../elements/CommunityEmptyTitle/CommunityEmptyTitle';
import CommunityEmptyImage from '../../elements/CommunityEmptyImage/CommunityEmptyImage';
import CommunityListSkeleton from '../../components/CommunityListSkeleton/CommunityListSkeleton';
import { SafeAreaView } from 'react-native-safe-area-context';
const AmityCommunitiesByCategoryPage = ({
  route
}) => {
  const pageId = PageID.communities_by_category_page;
  const {
    category
  } = route.params;
  const {
    accessibilityId,
    themeStyles
  } = useAmityPage({
    pageId
  });
  const {
    communities,
    loading,
    onNextCommunityPage
  } = useCommunities({
    categoryId: category.categoryId,
    membership: 'all'
  });
  const styles = useStyles(themeStyles);
  const navigation = useNavigation();
  const onPressCommunity = useCallback(({
    communityId
  }) => {
    navigation.navigate('CommunityProfilePage', {
      communityId
    });
  }, [navigation]);
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    testID: accessibilityId,
    style: styles.safeArea
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.header
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => navigation.goBack()
  }, /*#__PURE__*/React.createElement(BackButtonIconElement, {
    pageID: pageId,
    style: styles.headerIcon
  })), /*#__PURE__*/React.createElement(CategoryTitle, {
    title: category.name,
    pageId: pageId
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.empty
  })), loading && !communities && /*#__PURE__*/React.createElement(View, {
    style: styles.loadingContainer
  }, /*#__PURE__*/React.createElement(CommunityListSkeleton, {
    themeStyle: themeStyles,
    amount: 12,
    hasTitle: false
  })), !loading && (communities === null || communities === void 0 ? void 0 : communities.length) === 0 && /*#__PURE__*/React.createElement(View, {
    style: styles.emptyMessage
  }, /*#__PURE__*/React.createElement(CommunityEmptyImage, {
    pageId: pageId
  }), /*#__PURE__*/React.createElement(CommunityEmptyTitle, {
    pageId: pageId
  })), (communities === null || communities === void 0 ? void 0 : communities.length) > 0 && /*#__PURE__*/React.createElement(FlatList, {
    data: communities,
    renderItem: ({
      item
    }) => /*#__PURE__*/React.createElement(Pressable, {
      onPress: () => onPressCommunity({
        communityId: item.communityId
      })
    }, /*#__PURE__*/React.createElement(CommunityRowItem, {
      community: item,
      pageId: pageId,
      showJoinButton: false
    })),
    keyExtractor: item => item.communityId,
    contentContainerStyle: styles.listContent,
    onEndReached: () => onNextCommunityPage === null || onNextCommunityPage === void 0 ? void 0 : onNextCommunityPage(),
    onEndReachedThreshold: 0.5,
    ListFooterComponent: loading ? /*#__PURE__*/React.createElement(CommunityListSkeleton, {
      themeStyle: themeStyles,
      amount: 4
    }) : null
  }));
};
export default /*#__PURE__*/memo(AmityCommunitiesByCategoryPage);
//# sourceMappingURL=index.js.map