import { memo, useCallback } from 'react';
import { FlatList, Pressable, View } from 'react-native';
import { arrowRight } from '../../../../../core/assets/icons';
import CategoryChip from '../../../../components/CategoryChip/CategoryChip';
import { ComponentID, PageID } from '../../../../enums';
import { useStyles } from './styles';
import { Typography } from '../../../../../core/components/Typography/Typography';
import { SvgXml } from 'react-native-svg';
import { useAmityComponent } from '../../../../hooks';
import { useExplore } from '../../../../providers/ExploreProvider';
import { useNavigation } from '@react-navigation/native';
const AmityCommunityCategoriesComponent = ({
  pageId = PageID.WildCardPage
}) => {
  const {
    categories,
    hasMoreCategories
  } = useExplore();
  const componentId = ComponentID.explore_community_categories;
  const {
    isExcluded,
    accessibilityId,
    themeStyles
  } = useAmityComponent({
    pageId,
    componentId
  });
  const styles = useStyles(themeStyles);
  const navigation = useNavigation();
  const onPressCategory = useCallback(category => {
    navigation.navigate('CommunitiesByCategoryPage', {
      category
    });
  }, [navigation]);
  const onPressSeeMore = useCallback(() => {
    navigation.navigate('AllCategoriesPage');
  }, [navigation]);
  if (isExcluded && categories.length === 0) return null;
  return /*#__PURE__*/React.createElement(FlatList, {
    testID: accessibilityId,
    data: categories,
    renderItem: ({
      item
    }) => /*#__PURE__*/React.createElement(Pressable, {
      onPress: () => onPressCategory(item)
    }, /*#__PURE__*/React.createElement(CategoryChip, {
      category: item
    })),
    keyExtractor: item => item.categoryId,
    horizontal: true,
    showsHorizontalScrollIndicator: false,
    contentContainerStyle: styles.categoryChipsContentContainer,
    ListFooterComponent: hasMoreCategories ? /*#__PURE__*/React.createElement(Pressable, {
      onPress: onPressSeeMore
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.seeMoreCategoryButton
    }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
      style: styles.seeMoreCategoryText
    }, 'See more'), /*#__PURE__*/React.createElement(SvgXml, {
      width: 20,
      height: 20,
      xml: arrowRight(),
      color: themeStyles.colors.base
    }))) : null
  });
};
export default /*#__PURE__*/memo(AmityCommunityCategoriesComponent);
//# sourceMappingURL=Categories.js.map