/* eslint-disable no-magic-numbers */
import { Drawer } from '@/components/Map/Drawer';
import { Legend } from '@/components/Map/Legend';
import { MapViewer } from '@/components/Map/MapViewer';
import { MapLoader } from '@/components/Map/MapLoader/MapLoader.component';
import { MapVectorBackgroundSelector } from '@/components/Map/MapVectorBackgroundSelector/MapVectorBackgroundSelector.component';
import { MapActiveLayerSelector } from '@/components/Map/MapActiveLayerSelector/MapActiveLayerSelector.component';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { MapAdditionalLogos } from '@/components/Map/MapAdditionalLogos';
import { MapDrawActions } from '@/components/Map/MapDrawActions/MapDrawActions.component';
import { layersActiveLayerSelector } from '@/redux/layers/layers.selectors';
import { hasPrivilegeToWriteProjectSelector } from '@/redux/user/user.selectors';
import { MapAdditionalActions } from './MapAdditionalActions';
import { PluginsDrawer } from './PluginsDrawer';

export const Map = (): JSX.Element => {
  const activeLayer = useAppSelector(layersActiveLayerSelector);
  const hasPrivilegeToWriteProject = useAppSelector(hasPrivilegeToWriteProjectSelector);

  return (
    <div
      className="relative z-0 h-screen w-full overflow-hidden bg-black"
      data-testid="map-container"
    >
      <MapViewer />
      <MapVectorBackgroundSelector />
      {hasPrivilegeToWriteProject && (
        <>
          <MapActiveLayerSelector />
          {activeLayer && <MapDrawActions />}
        </>
      )}
      <Drawer />
      <PluginsDrawer />
      <Legend />
      <MapAdditionalActions />
      <MapAdditionalLogos />
      <MapLoader />
    </div>
  );
};