import { currentDrawerReactionSelector } from '@/redux/reactions/reactions.selector';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { Icon } from '@/shared/Icon';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { DEFAULT_REFERENCE_SOURCE } from './ReactionDrawer.constants';
import { getFilteredReferences } from './utils/getFilteredReferences';
import { getGroupedReferences } from './utils/getGroupedReferences';

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

  const referencesGrouped = useMemo(() => {
    const referencesFiltered = getFilteredReferences(reaction);
    return getGroupedReferences(referencesFiltered);
  }, [reaction]);

  if (!reaction) {
    return null;
  }

  return (
    <div className="h-full max-h-full">
      <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(({ source, references }) => (
          <>
            <h3 className="font-semibold">Source: {source || DEFAULT_REFERENCE_SOURCE}</h3>
            {references.map(({ id, link, type }) => (
              <a key={id} href={link} target="_blank">
                <div className="flex justify-between">
                  <span>{`${type} (${id})`}</span>
                  <Icon name="arrow" className="h-6 w-6 fill-font-500" />
                </div>
              </a>
            ))}
          </>
        ))}
      </div>
    </div>
  );
};