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 {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;
  postId: number;
  customMessageStyle?: ViewStyle;
  customContainerStyle?: StyleProp<ViewStyle>;
  articleId?: number;
  groupId?: number;
  isThread?: boolean;
  canBeAnswered?: boolean;
  hasOverlay?: boolean;
  isMarketplace?: boolean;
  shouldNavigateToThread?: boolean;
  onDetailPress: () => void;
  commentableType?: CommentableType;
  onReplyPress: () => void;
  toggleReactionsBottomSheet: (comment: Comment) => void;
  onReactionPress?: (reaction: string, comment: Comment) => void;
  showOptions?: boolean;
}

export function PostCommentItem({
  item,
  postId,
  onDetailPress,
  onReplyPress,
  toggleReactionsBottomSheet,
  onReactionPress: onReactionPressProp,
  showOptions,
}: Props) {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [selectedComment, setSelectedComment] =
    useState<Nullable<Comment>>(null);

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

  const onReactionPress = useCallback(
    (reaction: string, comment: Comment) => {
      const reactionData = {
        postId,
        commentId: comment.id,
        reaction,
        commentableType: CommentableType.POST,
      };
      const isReactedByUser = getIsReactionLoggedUser(
        comment.reactions || [],
        reaction,
      );

      dispatch(
        isReactedByUser
          ? removeCommentReaction(reactionData)
          : addCommentReaction(reactionData),
      );
    },
    [dispatch, postId],
  );

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

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

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