import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { openOverviewImagesModalById } from '@/redux/modal/modal.slice';
import {
  projectDefaultOverviewImageIdSelector,
  projectOverviewImagesSelector,
} from '@/redux/project/project.selectors';
import { Button } from '@/shared/Button';
import { useSelector } from 'react-redux';
import { twMerge } from 'tailwind-merge';
import { ZERO } from '@/constants/common';
import { BackgroundSelector } from './BackgroundsSelector';

// top-[calc(64px+40px+24px)] -> TOP_BAR_HEIGHT+MAP_NAVIGATION_HEIGHT+DISTANCE_FROM_MAP_NAVIGATION

export const MapAdditionalOptions = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const defaultOverviewImageId = useSelector(projectDefaultOverviewImageIdSelector);
  const overviewImages = useSelector(projectOverviewImagesSelector);
  const overviewImagesEmpty = overviewImages.length === ZERO;

  const handleBrowseOverviewImagesClick = (): void => {
    dispatch(openOverviewImagesModalById(defaultOverviewImageId));
  };

  return (
    <div className={twMerge('absolute right-6 top-[calc(64px+40px+24px)] z-10 flex')}>
      <Button
        className="mr-4"
        onClick={handleBrowseOverviewImagesClick}
        disabled={overviewImagesEmpty}
      >
        Browse overview images
      </Button>
      <BackgroundSelector />
    </div>
  );
};