import React, {useCallback} from 'react';
import {useNavigation} from '@react-navigation/native';
import {useDispatch} from 'react-redux';
import {PostCommentItem} from '@components';
import {Comment} from '@interfaces/comments';
import {Post} from '@modules/post/interfaces';
import {useCommentById} from '@modules/post/store/useCommentsStore';
import {useEventCommentById} from '@modules/events/store/useEventCommentsStore';
import useReactToComments from '@modules/post/hooks/useReactToComments';
import {openReactionPicker} from '@modules/app/redux';
import {Screens} from '@shared/constants';

type ToggleCommentReactionParams = {
  postId: number;
  commentId: number;
  parentId?: number;
  reactions: Post['reactions'];
  reaction: string;
};

interface Props {
  commentId: number;
  comment?: Comment;
  canManagePosts: boolean;
  canManageComments: boolean;
  postId: number;
  eventId?: number;
  onToggleCommentReaction?: (params: ToggleCommentReactionParams) => void;
  showOptions?: boolean;
  groupId?: number;
}

function PostDetailComment({
  groupId,
  commentId,
  comment: commentProp,
  canManagePosts,
  canManageComments,
  postId,
  eventId,
  onToggleCommentReaction: onToggleCommentReactionProp,
  showOptions,
}: Props) {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const itemFromPostStore = useCommentById(postId, commentId);
  const itemFromEventStore = useEventCommentById({
    postId,
    commentId,
  });
  const item = eventId != null ? itemFromEventStore : itemFromPostStore;
  const commentItem = commentProp || item;
  const feedToggleCommentReaction = useReactToComments().toggleCommentReaction;
  const toggleCommentReaction =
    onToggleCommentReactionProp ?? feedToggleCommentReaction;
  const onDetailPress = useCallback(() => {
    if (eventId != null) {
      navigation.navigate(Screens.EVENT_COMMENT_DETAIL, {
        eventId,
        postId,
        parentCommentId: commentId,
      });
      return;
    }
    navigation.navigate(Screens.COMMENT_DETAIL, {
      parentCommentId: commentId,
      postId,
      groupId,
    });
  }, [commentId, eventId, navigation, postId, groupId]);

  const onReplyPress = useCallback(() => {
    if (eventId != null) {
      navigation.navigate(Screens.EVENT_COMMENT_DETAIL, {
        eventId,
        postId,
        parentCommentId: commentId,
        isReplying: true,
      });
      return;
    }
    navigation.navigate(Screens.COMMENT_DETAIL, {
      parentCommentId: commentId,
      isReplying: true,
      postId,
      groupId,
    });
  }, [commentId, eventId, navigation, postId, groupId]);

  const toggleReactionsBottomSheet = useCallback(
    (commentToToggle: Comment) => {
      dispatch(
        openReactionPicker({
          commentId: commentToToggle.id,
          postId,
          reactions: commentToToggle.reactions || [],
          onReactionSelected: (reaction: string) =>
            toggleCommentReaction({
              postId,
              commentId: commentToToggle.id,
              reactions: commentToToggle.reactions || [],
              reaction,
              parentId: commentToToggle.parentId || undefined,
            }),
        }),
      );
    },
    [dispatch, postId, toggleCommentReaction],
  );

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

  if (!commentItem) return null;
  return (
    <PostCommentItem
      item={commentItem}
      canManagePosts={canManagePosts}
      canManageComments={canManageComments}
      postId={postId}
      onDetailPress={onDetailPress}
      onReplyPress={onReplyPress}
      onReactionPress={onCommentReactionPress}
      toggleReactionsBottomSheet={toggleReactionsBottomSheet}
      showOptions={showOptions}
    />
  );
}

export default PostDetailComment;