import React from 'react';
import {ReactionsSummaryBottomSheet} from '@components';
import {Reaction} from '@interfaces/reaction';
import {DEFAULT_REACTION} from '@shared/constants';

import {useGetUserFromReactionComment} from './useGetUserFromReactionComment';

interface ReactionsSummaryCommentsProps {
  showReactionsSummary: boolean;
  setSelectedReaction: (reaction: string) => void;
  reactions: Reaction[];
  onCloseReactionsSummary: () => void;
  id: number;
  selectedReaction: Nullable<string>;
  groupId?: number;
  postId?: number;
}

export function ReactionsSummaryComments({
  showReactionsSummary,
  setSelectedReaction,
  reactions,
  id,
  selectedReaction,
  onCloseReactionsSummary,
  groupId,
  postId,
}: ReactionsSummaryCommentsProps) {
  const queryData = useGetUserFromReactionComment({
    commentId: id,
    reaction: selectedReaction || DEFAULT_REACTION,
    showReactionsSummary,
    groupId,
    postId,
  });

  return (
    <ReactionsSummaryBottomSheet
      visible={showReactionsSummary}
      selectedReaction={selectedReaction}
      setSelectedReaction={setSelectedReaction}
      reactions={reactions}
      queryData={queryData}
      onClose={onCloseReactionsSummary}
    />
  );
}
