UserOverlaysGroup.component.tsx

import {
  Accordion,
  AccordionItem,
  AccordionItemButton,
  AccordionItemHeading,
  AccordionItemPanel,
} from '@/shared/Accordion';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { MapOverlay } from '@/types/models';
import React from 'react';
import { ZERO } from '@/constants/common';
import { Icon } from '@/shared/Icon';
import { openEditOverlayGroupModal } from '@/redux/modal/modal.slice';
import { overlayGroupSelector } from '@/redux/overlayGroup/overlayGroup.selectors';
import { store } from '@/redux/store';
import { useUserOverlays } from './hooks/useUserOverlays';
import { UserOverlayListItem } from './UserOverlayListItem';

type OverlayGroupProps = {
  groupId: number | null;
  groupName: string;
  overlays: MapOverlay[];
};

export const UserOverlaysGroup = ({
  overlays,
  groupName,
  groupId,
}: OverlayGroupProps): React.ReactNode => {
  const { moveUserOverlayListItem, updateUserOverlaysOrder, isPending, userOverlaysList } =
    useUserOverlays(overlays, groupId);

  const { dispatch, getState } = store;
  const state = getState();
  const overlayGroup = overlayGroupSelector(state, groupId);

  const nullOverlay: MapOverlay = {
    id: groupId ? -groupId : ZERO,
    group: groupId,
    publicOverlay: false,
    creator: '',
    type: '',
    description: '',
    name: '',
    genomeType: '',
    genomeVersion: '',
    order: 0,
  };

  const openEditGroup = (): void => {
    // eslint-disable-next-line no-console
    console.log('Open edit group', groupId);
    if (overlayGroup) {
      dispatch(openEditOverlayGroupModal(overlayGroup));
    }
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="mt-2.5">
        <Accordion allowZeroExpanded>
          <AccordionItem className="border-b-0">
            <AccordionItemHeading>
              <AccordionItemButton
                className="px-6 text-sm font-semibold"
                sideMenu={
                  groupId && (
                    <button onClick={openEditGroup} type="button" className="mr-2">
                      <Icon name="edit-image" />
                    </button>
                  )
                }
              >
                {groupName}
              </AccordionItemButton>
            </AccordionItemHeading>

            <AccordionItemPanel>
              {isPending ? (
                <span className="py-4 pl-10 pr-5">Loading...</span>
              ) : (
                <ul>
                  {userOverlaysList?.map((userOverlay, index) => (
                    <UserOverlayListItem
                      moveUserOverlay={moveUserOverlayListItem}
                      key={userOverlay.id}
                      index={index}
                      userOverlay={userOverlay}
                      updateUserOverlaysOrder={updateUserOverlaysOrder}
                    />
                  ))}
                  <UserOverlayListItem
                    moveUserOverlay={moveUserOverlayListItem}
                    key={nullOverlay.id}
                    index={0}
                    userOverlay={nullOverlay}
                    updateUserOverlaysOrder={updateUserOverlaysOrder}
                  />
                </ul>
              )}
            </AccordionItemPanel>
          </AccordionItem>
        </Accordion>
      </div>
    </DndProvider>
  );
};