import { ZERO } from '@/constants/common';
import {
  currentDrawerBioEntityRelatedSubmapSelector,
  currentDrawerBioEntitySelector,
  currentDrawerElementCommentsSelector,
} from '@/redux/bioEntity/bioEntity.selectors';
import {
  getChemicalsForBioEntityDrawerTarget,
  getDrugsForBioEntityDrawerTarget,
} from '@/redux/drawer/drawer.thunks';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { ElementSearchResultType } from '@/types/models';
import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection';
import { AnnotationItem } from './AnnotationItem';
import { AssociatedSubmap } from './AssociatedSubmap';
import { ChemicalsList } from './ChemicalsList';
import { DrugsList } from './DrugsList';
import { OverlayData } from './OverlayData';

const TARGET_PREFIX: ElementSearchResultType = `ALIAS`;

export const BioEntityDrawer = (): React.ReactNode => {
  const dispatch = useAppDispatch();
  const bioEntityData = useAppSelector(currentDrawerBioEntitySelector);
  const commentsData = useAppSelector(currentDrawerElementCommentsSelector);
  const relatedSubmap = useAppSelector(currentDrawerBioEntityRelatedSubmapSelector);
  const currentTargetId = bioEntityData?.id ? `${TARGET_PREFIX}:${bioEntityData.id}` : '';

  const fetchChemicalsForTarget = (): void => {
    dispatch(getChemicalsForBioEntityDrawerTarget(currentTargetId));
  };
  const fetchDrugsForTarget = (): void => {
    dispatch(getDrugsForBioEntityDrawerTarget(currentTargetId));
  };

  if (!bioEntityData) {
    return null;
  }

  const isReferenceAvailable = bioEntityData.references.length > ZERO;
  const isCommentAvailable = commentsData.length > ZERO;

  return (
    <div className="h-calc-drawer" data-testid="bioentity-drawer">
      <DrawerHeading
        title={
          <>
            <span className="font-normal">{bioEntityData.stringType}:</span>&nbsp;
            {bioEntityData.name}
          </>
        }
      />
      <div className="flex max-h-full flex-col gap-6 overflow-y-auto p-6">
        <div className="text-sm font-normal">
          Compartment: <b className="font-semibold">{bioEntityData.compartmentName}</b>
        </div>
        {bioEntityData.fullName && (
          <div className="text-sm font-normal">
            Full name: <b className="font-semibold">{bioEntityData.fullName}</b>
          </div>
        )}
        <h3 className="font-semibold">
          Annotations:{' '}
          {!isReferenceAvailable && <span className="font-normal">No annotations</span>}
        </h3>
        {isReferenceAvailable &&
          bioEntityData.references.map(reference => (
            <AnnotationItem
              key={reference.id}
              type={reference.type}
              link={reference.link}
              resource={reference.resource}
            />
          ))}
        <AssociatedSubmap />
        {!relatedSubmap && (
          <>
            <CollapsibleSection title="Drugs for target" onOpened={fetchDrugsForTarget}>
              <DrugsList />
            </CollapsibleSection>
            <CollapsibleSection title="Chemicals for target" onOpened={fetchChemicalsForTarget}>
              <ChemicalsList />
            </CollapsibleSection>
          </>
        )}
        <OverlayData
          isShowGroupedOverlays={Boolean(relatedSubmap)}
          isShowOverlayBioEntityName={Boolean(relatedSubmap)}
        />
        {isCommentAvailable && <div className="font-bold"> Comments</div>}
        {isCommentAvailable &&
          commentsData.map(comment => <CommentItem key={comment.id} comment={comment} />)}
      </div>
    </div>
  );
};