import React from 'react';
import {Reaction} from '@interfaces/reaction';
import {Comment as CommentType} from '@interfaces/comments';
import {ModalAction} from '@modules/app/redux';
import {useCommentById} from '@modules/post/store/useCommentsStore';
import CommentItem from '@modules/post/screens/CommentDetailRefactored/components/CommentItem';
import {usePostById} from '@modules/post/store/useFeedStore';

interface Props {
  postId: number;
  commentId: number;
  parentId?: number;
  userId: number;
  onTagPress: (targetId: number) => void;
  onReactionPress: ({
    reaction,
    commentId,
    reactions,
  }: {
    reaction: string;
    commentId: number;
    reactions: Reaction[];
  }) => void;
  onToggleSelectNewReaction: ({comment}: {comment: CommentType}) => ModalAction;
  onReply: (item: CommentType) => void;
  isReply: boolean;
  groupId?: number;
}

const FeedCommentItem = ({
  postId,
  commentId,
  parentId,
  userId,
  groupId,
  onTagPress,
  onReactionPress,
  onToggleSelectNewReaction,
  onReply,
  isReply,
}: Props) => {
  const comment = useCommentById(postId, commentId, parentId);
  const lastComment = usePostById(postId)?.lastComments?.[0];
  const item = comment || (lastComment?.id === commentId ? lastComment : null);
  const isOwner = userId === item?.user.id;
  if (!item) return null;
  return (
    <CommentItem
      postId={postId}
      item={item}
      onTagPress={onTagPress}
      onToggleSelectNewReaction={onToggleSelectNewReaction}
      onReply={onReply}
      groupId={groupId}
      isOwner={isOwner}
      onReactionPress={onReactionPress}
      isReply={isReply}
    />
  );
};

export default FeedCommentItem;