import { View, FlatList, Pressable } from 'react-native';
import { memo, useCallback } from 'react';
import { useStyles } from './styles';
import { PageID } from '../../enums';
import { useAmityPage, useCategories } from '../../hooks';
import AllCategoriesTitle from '../../elements/AllCategoriesTitle/AllCategoriesTitle';
import BackButtonIconElement from '../../elements/BackButtonIconElement/BackButtonIconElement';
import CategoryRowItem from './CategoryRowItem/CategoryRowItem';
import { useNavigation } from '@react-navigation/native';
import CategoryListSkeleton from './CategoryListSkeleton/CategoryListSkeleton';
import { SafeAreaView } from 'react-native-safe-area-context';
const AmityAllCategoriesPage = () => {
  const pageId = PageID.all_categories_page;
  const {
    accessibilityId,
    themeStyles
  } = useAmityPage({
    pageId
  });
  const {
    categories,
    loading,
    onNextCategoryPage
  } = useCategories({
    limit: 20
  });
  const styles = useStyles(themeStyles);
  const navigation = useNavigation();
  const onPressCategory = useCallback(category => {
    navigation.navigate('CommunitiesByCategoryPage', {
      category
    });
  }, [navigation]);
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    testID: accessibilityId,
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.header
  }, /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => navigation.goBack()
  }, /*#__PURE__*/React.createElement(BackButtonIconElement, {
    pageID: pageId,
    style: styles.headerIcon
  })), /*#__PURE__*/React.createElement(AllCategoriesTitle, {
    title: 'All Categories',
    pageId: pageId
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.empty
  })), /*#__PURE__*/React.createElement(FlatList, {
    data: categories,
    renderItem: ({
      item
    }) => /*#__PURE__*/React.createElement(Pressable, {
      onPress: () => onPressCategory(item)
    }, /*#__PURE__*/React.createElement(CategoryRowItem, {
      category: item,
      pageId: pageId
    })),
    keyExtractor: item => item.categoryId,
    contentContainerStyle: styles.listContent,
    style: styles.list,
    onEndReached: () => {
      onNextCategoryPage === null || onNextCategoryPage === void 0 || onNextCategoryPage();
    },
    onEndReachedThreshold: 0.5,
    ListFooterComponent: loading ? /*#__PURE__*/React.createElement(CategoryListSkeleton, {
      themeStyle: themeStyles,
      amount: !categories ? 20 : 4
    }) : null
  }));
};
export default /*#__PURE__*/memo(AmityAllCategoriesPage);
//# sourceMappingURL=index.js.map