import React, {useCallback, useState} from 'react';
import {ViewStyle, StyleProp} from 'react-native';
import {StackActions, useNavigation} from '@react-navigation/native';
import {useDispatch} from 'react-redux';
import {ReactionsSummaryComments} from '@components';
import {useReactionsSummary} from '@hooks/useReactionsSummary';
import {Comment, CommentableType} from '@interfaces/comments';
import {openReactionPicker} from '@modules/app/redux';
import {CommentItem} from '@modules/post/components/CommentItem';
import {
  removeCommentReaction,
  addCommentReaction,
} from '@redux/comment/comment.actions';
import {Screens} from '@shared/constants';
import {getIsReactionLoggedUser} from '@shared/utils';

interface Props {
  item: Comment;
  canManagePosts?: boolean;
  canManageComments?: boolean;
  scrollToEnd?: () => void;
  postId: number;
  customContainerStyle?: StyleProp<ViewStyle>;
  articleId?: number;
  groupId?: number;
  goBackOnDelete?: boolean;
  isReplyComment?: boolean;
  isThread?: boolean;
  canBeAnswered?: boolean;
  onReply?: () => void;
  hasOverlay?: boolean;
  isMarketplace?: boolean;
  shouldNavigateToThread?: boolean;
}

// TODO: Move to `_custom` folder
function PostCommentItem({
  item,
  postId,
  articleId,
  groupId,
  isMarketplace,
}: Props) {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [selectedComment, setSelectedComment] =
    useState<Nullable<Comment>>(null);
  const commentableType = groupId
    ? CommentableType.GROUP_POST
    : articleId
    ? CommentableType.ARTICLE
    : isMarketplace
    ? CommentableType.MARKETPLACE
    : CommentableType.POST;

  const onTagPress = useCallback(
    (targetId: number) => {
      navigation.dispatch(
        StackActions.push(Screens.PROFILE, {userId: targetId}),
      );
    },
    [navigation],
  );

  const onDetailPress = useCallback(() => {
    navigation.navigate(Screens.COMMENT_DETAIL, {
      parentCommentId: item.id,
      postId,
      articleId,
      groupId,
      isMarketplace,
    });
  }, [navigation, item.id, postId, articleId, groupId, isMarketplace]);

  const onReplyPress = useCallback(() => {
    navigation.navigate(Screens.COMMENT_DETAIL, {
      parentCommentId: item.id,
      isReplying: true,
      postId,
      articleId,
      groupId,
      isMarketplace,
    });
  }, [navigation, item.id, postId, articleId, groupId, isMarketplace]);

  const onToggleReactionsBottomSheet = useCallback(
    (comment: Comment) => {
      dispatch(
        openReactionPicker({
          commentId: comment.id,
          commentableType,
          postId,
          groupId,
          articleId,
          isMarketplace,
          parentId: comment?.parentId || undefined,
          reactions: comment.reactions || [],
        }),
      );
    },
    [dispatch, postId, commentableType, groupId, articleId, isMarketplace],
  );

  const onReactionPress = useCallback(
    (reaction: string, comment: Comment) => {
      const reactionData = {
        commentableType,
        postId,
        commentId: comment.id,
        reaction,
        articleId,
        groupId,
        parentId: undefined,
        isMarketplace,
        isAcknowledgement: false,
      };
      const isReactedByUser = getIsReactionLoggedUser(
        comment.reactions || [],
        reaction,
      );

      dispatch(
        isReactedByUser
          ? removeCommentReaction(reactionData)
          : addCommentReaction(reactionData),
      );
    },
    [dispatch, postId, commentableType, groupId, articleId, isMarketplace],
  );

  const {
    showReactionsSummary,
    selectedReaction,
    setSelectedReaction,
    onShowSummaryBottomSheet,
    onCloseReactionsSummary,
  } = useReactionsSummary();

  const onToggleReactionsList = useCallback(
    (comment: Comment, reaction: string) => {
      setSelectedComment(comment);
      onShowSummaryBottomSheet(reaction);
    },
    [onShowSummaryBottomSheet],
  );

  return (
    <>
      <CommentItem
        postId={postId}
        groupId={groupId}
        articleId={articleId}
        isMarketplace={isMarketplace}
        item={item}
        onTagPress={onTagPress}
        onReplyPress={onReplyPress}
        onDetailPress={onDetailPress}
        toggleReactionsBottomSheet={onToggleReactionsBottomSheet}
        onReactionPress={onReactionPress}
        onToggleReactionsListDrawer={onToggleReactionsList}
      />
      {showReactionsSummary && selectedComment && (
        <ReactionsSummaryComments
          showReactionsSummary
          setSelectedReaction={setSelectedReaction}
          reactions={selectedComment?.reactions || []}
          id={selectedComment?.id}
          selectedReaction={selectedReaction}
          onCloseReactionsSummary={onCloseReactionsSummary}
          groupId={groupId}
          postId={postId}
        />
      )}
    </>
  );
}

export default PostCommentItem;