import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { getPublications } from '@/redux/publications/publications.thunks';
import { useEffect, useMemo } from 'react';
import { publicationsListDataSelector } from '@/redux/publications/publications.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modelsNameMapSelector } from '@/redux/models/models.selectors';
import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
import { LoadingIndicator } from '@/shared/LoadingIndicator';
import {
  PublicationsTable,
  PublicationsTableData,
} from './PublicationsTable/PublicationsTable.component';
import { PublicationsModalLayout } from './PublicationsModalLayout';

export const PublicationsModal = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const data = useAppSelector(publicationsListDataSelector);
  const mapsNames = useAppSelector(modelsNameMapSelector);

  const parsedData: PublicationsTableData[] | undefined = useMemo(() => {
    const dd = data?.map(item => ({
      pubmedId: item.publication.article.pubmedId,
      title: item.publication.article.title,
      authors: item.publication.article.authors,
      journal: item.publication.article.journal,
      year: item.publication.article.year,
      elementsOnMap: '{link to element on map}',
      submaps: mapsNames[item.elements[FIRST_ARRAY_ELEMENT].modelId],
    }));
    return dd || [];
  }, [data, mapsNames]);

  useEffect(() => {
    if (!data) {
      dispatch(getPublications({ params: {} }));
    }
  }, [data, dispatch]);

  return (
    <PublicationsModalLayout>
      <div className="flex w-full flex-1 flex-col items-center justify-center overflow-hidden bg-white">
        {data ? <PublicationsTable data={parsedData} /> : <LoadingIndicator />}
      </div>
    </PublicationsModalLayout>
  );
};