import { View } from 'react-native';
import { memo, useCallback } from 'react';
import { useStyles } from './styles';
import { useAmityComponent, useCommunities } from '../../../../hooks';
import { PageID, ComponentID } from '../../../../enums';
import { useNavigation } from '@react-navigation/native';
import { useBehaviour } from '../../../../providers/BehaviourProvider';
import CommunitySearchResult from '../../../../components/CommunitySearchResult/CommunitySearchResult';
import { emptyCommunity, plus } from '../../../../../core/assets/icons';
import { Typography } from '../../../../../core/components/Typography/Typography';
import { SvgXml } from 'react-native-svg';
import { Button } from '../../../../components/Button/Button';
const AmityMyCommunitiesComponent = ({
  pageId = PageID.WildCardPage
}) => {
  const componentId = ComponentID.my_communities;
  const {
    isExcluded,
    accessibilityId,
    themeStyles
  } = useAmityComponent({
    pageId,
    componentId
  });
  const navigation = useNavigation();
  const {
    AmityMyCommunitiesComponentBehaviour
  } = useBehaviour();
  const styles = useStyles(themeStyles);
  const {
    communities,
    onNextCommunityPage,
    loading
  } = useCommunities();
  const onPressCommunity = useCallback(({
    communityId
  }) => {
    if (AmityMyCommunitiesComponentBehaviour.onPressCommunity) return AmityMyCommunitiesComponentBehaviour.onPressCommunity();
    navigation.navigate('CommunityProfilePage', {
      communityId
    });
  }, [navigation, AmityMyCommunitiesComponentBehaviour]);
  const onPressCreateCommunity = useCallback(() => {
    navigation.navigate('CreateCommunity');
  }, [navigation]);

  // Empty state cannot be customized
  const renderEmptyState = useCallback(() => {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.emptyContainer
    }, /*#__PURE__*/React.createElement(SvgXml, {
      xml: emptyCommunity({})
    }), /*#__PURE__*/React.createElement(Typography.BodyBold, {
      style: styles.emptyTitleText
    }, 'No community yet'), /*#__PURE__*/React.createElement(Typography.Caption, {
      style: styles.emptyDescriptionText
    }, "Let's create your own communities"), /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      icon: plus(),
      style: styles.createCommunityButton,
      onPress: onPressCreateCommunity
    }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
      style: styles.createCommunityButtonText
    }, 'Create community')));
  }, [styles, themeStyles, onPressCreateCommunity]);
  if (isExcluded) return null;
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container,
    testID: accessibilityId,
    accessibilityLabel: accessibilityId
  }, !loading && (communities === null || communities === void 0 ? void 0 : communities.length) === 0 ? renderEmptyState() : /*#__PURE__*/React.createElement(CommunitySearchResult, {
    pageId: pageId,
    componentId: componentId,
    isFirstTimeLoading: loading && !communities,
    isLoading: loading,
    communities: communities,
    onPressCommunity: onPressCommunity,
    onNextPage: onNextCommunityPage
  }));
};
export default /*#__PURE__*/memo(AmityMyCommunitiesComponent);
//# sourceMappingURL=MyCommunities.js.map