import {
  currentDrawerReactionGroupedReferencesSelector,
  currentDrawerReactionSelector,
} from '@/redux/reactions/reactions.selector';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { useSelector } from 'react-redux';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { currentDrawerReactionCommentsSelector } from '@/redux/bioEntity/bioEntity.selectors';
import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
import { ZERO } from '@/constants/common';
import React from 'react';
import { ReferenceGroup } from './ReferenceGroup';
import { ConnectedBioEntitiesList } from './ConnectedBioEntitiesList';

export const ReactionDrawer = (): React.ReactNode => {
  const reaction = useSelector(currentDrawerReactionSelector);
  const referencesGrouped = useSelector(currentDrawerReactionGroupedReferencesSelector);

  const commentsData = useAppSelector(currentDrawerReactionCommentsSelector);

  if (!reaction) {
    return null;
  }

  const isCommentAvailable = commentsData.length > ZERO;

  return (
    <div className="h-full max-h-full" data-testid="reaction-drawer">
      <DrawerHeading
        title={
          <>
            <span className="font-normal">Reaction:</span>&nbsp;{reaction.reactionId}
          </>
        }
      />
      <div className="flex h-[calc(100%-93px)] max-h-[calc(100%-93px)] flex-col gap-6 overflow-y-auto p-6">
        <div className="text-sm font-normal">
          Type: <b className="font-semibold">{reaction.type}</b>
        </div>
        <hr className="border-b border-b-divide" />
        {reaction.notes && (
          <div
            className="text-sm font-normal"
            dangerouslySetInnerHTML={{ __html: reaction.notes }}
          />
        )}

        <h3 className="font-semibold">Annotations:</h3>
        {referencesGrouped.map(group => (
          <ReferenceGroup key={group.source} group={group} />
        ))}
        <ConnectedBioEntitiesList />
        {isCommentAvailable && <div className="font-bold"> Comments</div>}
        {isCommentAvailable &&
          commentsData.map(comment => <CommentItem key={comment.id} comment={comment} />)}
      </div>
    </div>
  );
};