import { useEffect } from 'react';
import { useStyles } from './styles';
import { Alert, FlatList, TouchableOpacity, View } from 'react-native';
import { Typography } from '../../../../../../core/components/Typography/Typography';
import Avatar from '../../../../../components/Avatar';
import { useNavigation } from '@react-navigation/native';
import Timestamp from '../../../../../elements/Timestamp';
import { ComponentID, ElementID, PageID } from '../../../../../enums';
import MenuButton from '../../../../../elements/MenuButton';
import useAuth from '../../../../../../core/hooks/useAuth';
import { useBottomSheet } from '../../../../../../core/stores/slices/bottomSheetSlice';
import { firework, trash } from '../../../../../../core/assets/icons';
import MenuAction from '../../../../../elements/MenuAction';
import PostContent from '../../../../../components/PostContent';
import FormDescription from '../../../../../elements/FormDescription';
import { usePostCollection } from '../../../../../hooks/collections/post/usePostCollection';
import ActionButton from '../../../../../elements/ActionButton';
import { usePendingPostQuery } from '../../../../../hooks/usePendingPostQuery';
import { BrandBadge } from '../../../../../elements/BrandBadge';
import { isModerator, useUser } from '../../../../../hooks';
import { SvgXml } from 'react-native-svg';
import { Title } from '../../../../../elements';
import PostFeedSkeleton from '../../../../../components/PostFeedSkeleton';
const usePendingPostList = ({
  community,
  onPendingPostCountChange
}) => {
  const {
    styles,
    theme
  } = useStyles();
  const {
    client
  } = useAuth();
  const {
    openBottomSheet,
    closeBottomSheet
  } = useBottomSheet();
  const navigation = useNavigation();
  const {
    deletePost,
    approvePost,
    declinePost
  } = usePendingPostQuery();
  const collection = usePostCollection({
    params: {
      targetType: 'community',
      targetId: community.communityId,
      feedType: 'reviewing',
      limit: 20
    }
  });
  const currentUser = useUser(client.userId || '');
  const isCommunityModerator = isModerator(currentUser === null || currentUser === void 0 ? void 0 : currentUser.roles);
  useEffect(() => {
    onPendingPostCountChange === null || onPendingPostCountChange === void 0 || onPendingPostCountChange(collection.data.length);
  }, [collection.data.length, onPendingPostCountChange]);
  const handleDeletePost = postId => {
    closeBottomSheet();
    Alert.alert('Delete this post?', "This post will be permanently deleted. You'll no longer to see and find this post.", [{
      text: 'Cancel',
      style: 'cancel'
    }, {
      text: 'Delete',
      style: 'destructive',
      onPress: () => {
        deletePost(postId);
      }
    }]);
  };
  const renderDivider = () => /*#__PURE__*/React.createElement(View, {
    style: styles.separator
  });
  return {
    styles,
    theme,
    client,
    navigation,
    collection,
    declinePost,
    approvePost,
    renderDivider,
    openBottomSheet,
    handleDeletePost,
    isCommunityModerator
  };
};
const PendingPostList = ({
  community,
  onPendingPostCountChange
}) => {
  const {
    client,
    styles,
    theme,
    navigation,
    collection,
    declinePost,
    approvePost,
    renderDivider,
    openBottomSheet,
    handleDeletePost,
    isCommunityModerator
  } = usePendingPostList({
    community,
    onPendingPostCountChange
  });
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.labelContainer
  }, /*#__PURE__*/React.createElement(FormDescription, {
    pageId: PageID.pending_request_page,
    componentId: ComponentID.pending_post_list,
    elementId: ElementID.posts_tab_description
  })), collection.isLoading && /*#__PURE__*/React.createElement(PostFeedSkeleton, null), /*#__PURE__*/React.createElement(FlatList, {
    data: collection.data,
    style: styles.scrollContainer,
    keyExtractor: item => item.postId,
    ItemSeparatorComponent: renderDivider,
    showsVerticalScrollIndicator: false,
    contentContainerStyle: styles.pendingPostListContainer,
    ListFooterComponent: collection.isFetchingNextPage ? /*#__PURE__*/React.createElement(PostFeedSkeleton, null) : null,
    ListEmptyComponent: /*#__PURE__*/React.createElement(View, {
      style: styles.emptyContainer
    }, /*#__PURE__*/React.createElement(SvgXml, {
      width: 60,
      height: 60,
      xml: firework(),
      color: theme.colors.secondaryShade4
    }), /*#__PURE__*/React.createElement(Title, {
      style: styles.emptyTitle
    }, "No pending posts")),
    onEndReached: () => {
      var _collection$fetchNext;
      if (collection.hasNextPage && !collection.isFetchingNextPage) (_collection$fetchNext = collection.fetchNextPage) === null || _collection$fetchNext === void 0 || _collection$fetchNext.call(collection);
    },
    renderItem: ({
      item
    }) => {
      var _item$creator, _item$creator2, _item$creator3, _item$creator4, _item$creator6, _item$creator7, _item$creator8, _item$creator9, _item$data, _item$metadata;
      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
        style: styles.pendingPostContainer
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.pendingPostCreatorContainer
      }, /*#__PURE__*/React.createElement(Avatar.User, {
        userName: (item === null || item === void 0 || (_item$creator = item.creator) === null || _item$creator === void 0 ? void 0 : _item$creator.displayName) || (item === null || item === void 0 || (_item$creator2 = item.creator) === null || _item$creator2 === void 0 ? void 0 : _item$creator2.userId),
        imageStyle: styles.pendingPostAvatar,
        uri: item === null || item === void 0 || (_item$creator3 = item.creator) === null || _item$creator3 === void 0 || (_item$creator3 = _item$creator3.avatar) === null || _item$creator3 === void 0 ? void 0 : _item$creator3.fileUrl,
        userId: item === null || item === void 0 || (_item$creator4 = item.creator) === null || _item$creator4 === void 0 ? void 0 : _item$creator4.userId,
        shouldRedirectToUserProfile: true
      }), /*#__PURE__*/React.createElement(View, {
        style: styles.userNameContainer
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.displayNameRow
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: styles.displayNameTouchable,
        onPress: () => {
          var _item$creator5;
          return navigation.navigate('UserProfile', {
            userId: item === null || item === void 0 || (_item$creator5 = item.creator) === null || _item$creator5 === void 0 ? void 0 : _item$creator5.userId
          });
        }
      }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
        style: styles.colorBase,
        numberOfLines: 1,
        ellipsizeMode: "tail"
      }, (item === null || item === void 0 || (_item$creator6 = item.creator) === null || _item$creator6 === void 0 ? void 0 : _item$creator6.displayName) || (item === null || item === void 0 || (_item$creator7 = item.creator) === null || _item$creator7 === void 0 ? void 0 : _item$creator7.userId))), (item === null || item === void 0 || (_item$creator8 = item.creator) === null || _item$creator8 === void 0 ? void 0 : _item$creator8.isBrand) && /*#__PURE__*/React.createElement(BrandBadge, {
        width: 16,
        height: 16
      })), /*#__PURE__*/React.createElement(Timestamp, {
        timestamp: item === null || item === void 0 ? void 0 : item.createdAt,
        pageId: PageID.pending_request_page,
        componentId: ComponentID.pending_post_list
      }))), client.userId === (item === null || item === void 0 || (_item$creator9 = item.creator) === null || _item$creator9 === void 0 ? void 0 : _item$creator9.userId) && /*#__PURE__*/React.createElement(MenuButton, {
        testID: "pending-post-menu-button",
        pageId: PageID.pending_request_page,
        componentId: ComponentID.pending_post_list,
        onPress: () => {
          openBottomSheet({
            height: 140,
            content: /*#__PURE__*/React.createElement(MenuAction, {
              danger: true,
              label: "Delete post",
              onPress: () => handleDeletePost(item === null || item === void 0 ? void 0 : item.postId),
              iconProps: {
                xml: trash()
              },
              testID: "delete-pending-post-button",
              accessibilityLabel: "Delete pending post"
            })
          });
        }
      })), /*#__PURE__*/React.createElement(View, {
        style: styles.pendingPostContentContainer
      }, /*#__PURE__*/React.createElement(PostContent, {
        post: item,
        disabledPoll: true,
        showedAllOptions: true,
        childrenPosts: item.children,
        textPost: (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.text,
        mentionPositionArr: (item === null || item === void 0 || (_item$metadata = item.metadata) === null || _item$metadata === void 0 ? void 0 : _item$metadata.mentioned) ?? []
      })), isCommunityModerator && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
        style: styles.divider
      }), /*#__PURE__*/React.createElement(View, {
        style: styles.actionContainer
      }, /*#__PURE__*/React.createElement(ActionButton, {
        fullWidth: true,
        pageId: PageID.pending_request_page,
        onPress: () => approvePost(item.postId),
        componentId: ComponentID.pending_post_list,
        elementId: ElementID.post_accept_button
      }), /*#__PURE__*/React.createElement(ActionButton, {
        fullWidth: true,
        type: "secondary",
        pageId: PageID.pending_request_page,
        onPress: () => declinePost(item.postId),
        componentId: ComponentID.pending_post_list,
        elementId: ElementID.post_decline_button
      }))));
    }
  }));
};
export default PendingPostList;
//# sourceMappingURL=PendingPostList.js.map