import React, {memo, useCallback, useState} from 'react';
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 {
  useCommentActions,
  useCommentById,
} from '@modules/group/store/useGroupPostCommentsStore';
import {openReactionPicker} from '@modules/app/redux';
import {CommentItem} from '@modules/post/components/CommentItem';
import useReactToComments from '@modules/group/hooks/useReactToComments';
import {Screens} from '@shared/constants';

interface Props {
  postId: number;
  comment?: Comment;
  commentId: number;
  groupId: number;
  iAmAdmin: boolean;
  canInteract: boolean;
  isArchived?: boolean;
  showOptions?: boolean;
}

const GroupComment = ({
  postId,
  commentId,
  showOptions,
  comment: commentProp,
  groupId,
  iAmAdmin,
  canInteract,
  isArchived,
}: Props) => {
  const item = useCommentById(postId, commentId);
  const commentItem = commentProp || item;
  const {toggleCommentReaction} = useReactToComments({groupId});
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const {addComment} = useCommentActions();
  const [selectedComment, setSelectedComment] =
    useState<Nullable<Comment>>(null);

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

  const onDetailPress = useCallback(() => {
    if (commentProp && !item) {
      addComment({
        postId,
        comment: commentProp,
        parentId: commentProp.parentId ?? null,
      });
    }
    navigation.navigate(Screens.COMMENT_DETAIL, {
      parentCommentId: commentId,
      postId,
      groupId,
    });
  }, [navigation, commentId, postId, groupId, commentProp, item, addComment]);

  const onReplyPress = useCallback(() => {
    if (commentProp && !item) {
      addComment({
        postId,
        comment: commentProp,
        parentId: commentProp.parentId ?? null,
      });
    }
    navigation.navigate(Screens.COMMENT_DETAIL, {
      parentCommentId: commentId,
      isReplying: true,
      postId,
      groupId,
    });
  }, [navigation, commentId, postId, groupId, commentProp, item, addComment]);

  const onToggleReactionsBottomSheet = useCallback(
    (comment: Comment) => {
      dispatch(
        openReactionPicker({
          commentId: comment.id,
          commentableType: CommentableType.GROUP_POST,
          postId,
          groupId,
          parentId: comment?.parentId || undefined,
          reactions: comment.reactions || [],
          onReactionSelected: (reaction: string) => {
            toggleCommentReaction({
              postId,
              commentId: comment.id,
              parentId: comment?.parentId || undefined,
              reactions: comment.reactions || [],
              reaction,
            });
          },
        }),
      );
    },
    [dispatch, postId, groupId, toggleCommentReaction],
  );

  const onReactionPress = useCallback(
    (reaction: string, comment: Comment) => {
      toggleCommentReaction({
        postId,
        commentId: comment.id,
        parentId: comment.parentId || undefined,
        reactions: comment.reactions || [],
        reaction,
      });
    },
    [toggleCommentReaction, postId],
  );

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

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

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

export default memo(GroupComment);