import {
  currentDrawerReactionGroupedReferencesSelector,
  currentDrawerReactionSelector,
} from '@/redux/reactions/reactions.selector';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { useSelector } from 'react-redux';
import { ReferenceGroup } from './ReferenceGroup';

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

  if (!reaction) {
    return null;
  }

  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 flex-col gap-6 p-6">
        <div className="text-sm font-normal">
          Type: <b className="font-semibold">{reaction.type}</b>
        </div>
        <hr className="border-b border-b-divide" />
        <h3 className="font-semibold">Annotations:</h3>
        {referencesGrouped.map(group => (
          <ReferenceGroup key={group.source} group={group} />
        ))}
      </div>
    </div>
  );
};