import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {Pressable, Typography} from '@components';
import {CommentFooter} from '@components/_custom/CommentFooter';
import {NewPostScreens} from '@components/_custom/NewPost';
import {FullPost, Post as TPost} from '@modules/post/interfaces';
import {EventPost} from '@modules/events/interfaces';
import {usePermissions, useUserId} from '@redux/selectors';
import {useAppSelector} from '@redux/utils';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';
import {useCommunityFeature} from '@stores/communityFeatures';

import {PostReactions} from '../PostReactions';
import {PostTranslation} from '../PostTranslation';
import {styles} from './styles';

type Props = {
  post: TPost | EventPost;
  groupId?: number;
  groupIsArchived?: boolean;
  canInteract: boolean;
  onReactionPress: (reaction: string) => void;
  onPressComment: () => void;
  isMarketplace?: boolean;
};

export function PostFooter({
  post,
  groupId,
  groupIsArchived = false,
  canInteract,
  onReactionPress,
  onPressComment,
  isMarketplace = false,
}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const navigation = useNavigation();
  const {
    CAN_REACT_CONTENT: canReactGeneral,
    CAN_REACT_POSTS: canReactInPosts,
    CAN_REACT_MARKETPLACE_POSTS: canReactInMarketplace,
    CREATE_COMMENT: canCommentGeneral,
    CREATE_COMMENT_IN_POSTS: canCommentInPosts,
    CREATE_COMMENT_IN_MARKETPLACE: canCommentInMarketplace,
  } = usePermissions();
  const userPostTranslationLanguage = useAppSelector(
    ({user: {postTranslationLanguage}}) => postTranslationLanguage,
  );
  const canTranslate = useCommunityFeature('TRANSLATE_POSTS');
  const canReact =
    canReactGeneral ||
    (isMarketplace ? canReactInMarketplace : !groupId && canReactInPosts);
  const canComment =
    canCommentGeneral ||
    (isMarketplace ? canCommentInMarketplace : !groupId && canCommentInPosts);
  const userId = useUserId();
  const isOwner = post.user?.id === userId;
  const allowTranslation =
    !!post.body?.length &&
    canTranslate &&
    (post as TPost).languageCode &&
    userPostTranslationLanguage &&
    (post as TPost).languageCode !== userPostTranslationLanguage;

  const onAudiencePress = () => {
    navigation.navigate(Screens.PUBLISH_POST, {
      initialRouteName: NewPostScreens.SegmentationPost,
      post: post as TPost,
    });
  };

  const audienceUsersCount = (post as FullPost).showSegmentationUsersCount
    ? (post as FullPost).segmentationUsersCount
    : undefined;

  const onSeenByPress = () => {
    navigation.navigate(Screens.POST_SEEN_BY, {
      id: post.id,
      groupId,
    });
  };

  return (
    <View>
      {allowTranslation && (
        <PostTranslation postId={post.id} groupId={groupId} />
      )}
      {!!post.viewCount && (
        <Pressable style={styles.seenByContainer} onPress={onSeenByPress}>
          <Typography
            variant="xs"
            color={theme.text.neutral.lighter}
            weight="semiBold">
            {t('post.seen_by')} {post.viewCount}
          </Typography>
        </Pressable>
      )}
      {(!!groupId || canReact) && (
        <PostReactions
          reactions={post.reactions}
          post={post}
          postId={post.id}
          groupId={groupId}
          isMarketplace={isMarketplace}
          disabled={groupIsArchived || !canInteract}
          handleReaction={onReactionPress}
          onReactionPickerPress={onReactionPress}
        />
      )}
      {post?.commentsEnabled ? (
        (canComment || !!groupId) && (
          <View>
            <CommentFooter
              onPressComment={onPressComment}
              onPressFooter={onPressComment}
              commentCount={post.commentCount}
              canAnswerComment={canInteract}
              audienceUsersCount={audienceUsersCount}
              onAudiencePress={onAudiencePress}
            />
          </View>
        )
      ) : isOwner ? (
        <View
          style={[
            styles.disabledComments,
            {borderColor: theme.border.neutral.default},
          ]}>
          <Typography variant="xs" color={theme.text.neutral.lighter}>
            {t('post.comments_disabled')}
          </Typography>
        </View>
      ) : null}
    </View>
  );
}
