import React, {useCallback} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useMutation} from 'react-query';
import {
  Alert,
  PendingApprovalPostsTabs,
  PostToChangeStatus,
  RenderSceneProps,
} from '@components';
import {queryClientV5} from '@config/queryClient';
import {PostApprovalStatus} from '@modules/group/interfaces';
import {PostRequestActionType} from '@modules/post/interfaces';
import {reviewFeedPendingApprovalPost} from '@modules/post/services';
import {removeFeedPostApproval} from '@modules/post/utils';
import {showSnackbar} from '@redux/dispatchers';
import {AMPLITUDE_EVENTS} from '@shared/constants';
import {useTheme} from '@shared/theme';
import {logAmplitudeEvent} from '@shared/utils';

import {ManagePendingApprovalPostsListTab} from './components/ManagePendingApprovalPostsListTab';
import {styles} from './styles';

const ManagePendingApprovalPostsScreen = () => {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const postsMutation = useMutation(
    ({
      posts: reviewPosts,
      ...rest
    }: {
      posts: PostToChangeStatus[];
      status: PostApprovalStatus;
    }) =>
      reviewFeedPendingApprovalPost({
        ...rest,
        requestIds: reviewPosts.map(p => p.requestId),
      }),
    {
      onSuccess: ({updatedIds}, variables) => {
        queryClientV5.invalidateQueries({
          queryKey: ['feedPendingApprovalPosts'],
        });
        logAmplitudeEvent(
          variables.status === PostApprovalStatus.REJECTED
            ? AMPLITUDE_EVENTS.FEED_POST_REJECTED
            : AMPLITUDE_EVENTS.FEED_POST_APPROVED,
          {
            postIds: updatedIds,
            acceptedUserIds: variables.posts.map(post => post.userId),
          },
        );

        showSnackbar({
          title: t(
            variables.status === PostApprovalStatus.REJECTED
              ? 'group.manage_post_approvals.post_rejected'
              : 'group.manage_post_approvals.post_approved',
            {count: variables.posts.length},
          ),
          variant: 'success',
        });

        // Remove only when rejected, since there is a socket for approved ones.
        if (PostApprovalStatus.REJECTED) {
          removeFeedPostApproval(updatedIds);
        }
      },
    },
  );

  const renderScene = useCallback(
    ({route}: RenderSceneProps) => (
      <ManagePendingApprovalPostsListTab
        actionType={route.key as PostRequestActionType}
        postsMutation={postsMutation}
      />
    ),
    [postsMutation],
  );

  return (
    <View
      style={[
        styles.screenRoot,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      <View style={styles.alertSection}>
        <Alert
          title={t('group.manage_post_approvals.info_title')}
          description={t('group.manage_post_approvals.info_subtitle')}
        />
      </View>
      <View style={styles.tabsSection}>
        <PendingApprovalPostsTabs renderScene={renderScene} />
      </View>
    </View>
  );
};
export default ManagePendingApprovalPostsScreen;