"import {
  APIProvider,
  Map,
  MapCameraChangedEvent,
  MapEvent,
} from '@vis.gl/react-google-maps'
import { FC, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { debounce } from 'lodash'
import ListIcon from '@mui/icons-material/List'
import FilterListIcon from '@mui/icons-material/FilterList'
import { useMediaQuery, Theme, Box, Button, Typography } from '@mui/material'
import CustomMarkers from './custom-markers/custom-markers'
import { useAppDispatch, useAppSelector } from '@/redux/hooks'
import calculateClosedRectangleCoordinates from '@/utils/calculateClosedRectangleCoordinates'
import useUpdateFarmDataBasedOnZoom from '@/utils/hooks/useUpdateFarmDataBasedOnZoom'
import { setSelectedLocation, setMapState } from '@/redux/globalFilters.slice'
import { styles } from '../../pages/map-page/map-page-style'
import CompassButton from '../map-components/campass-button/campass-button'
import { useLocation } from 'react-router-dom'
import useQueryLocation from '@/utils/hooks/useQueryLocation'
import { MAP_AREA_INPUT } from '@/utils/constants/constants'
import { Coordinate } from '@/utils/constants/interfaces'

export interface MapInfoWindowProps {
  data: {
    id: string
    title: string
    location: string
    tags: string[]
    img: string
    lat: number
    lng: number
  }
}
interface Position {
  lat: number
  lng: number
}

const MAX_ZOOM = 19
const MIN_ZOOM = 4
const DEFAULT_ZOOM = 12
export const CLUSTER_SWITCH_ZOOM_LEVEL = 10

const InteractiveMap: FC = () => {
  const location = useLocation()
  const [bounds, setBounds] = useState<Coordinate[]>([])

  const isMobile = useMediaQuery((theme: Theme) =>
    theme.breakpoints.down('tablet')
  )
  const isMobileOrTablet = useMediaQuery((theme: Theme) =>
    theme.breakpoints.down('desktop')
  )
  const navigate = useNavigate()
  const dispatch = useAppDispatch()

  const { storedMapState } = useAppSelector((state) => state.globalFilters)
  const { latitude, longitude } = location.state ?? useQueryLocation().location

  const setUserLocationAsCenter =
    location.state?.setUserLocationAsCenter ?? true

  const storedZoom = location.state
    ? location.state.zoom
    : storedMapState?.zoom ?? DEFAULT_ZOOM // default zoom level

  const [zoom, setZoom] = useState<number>(storedZoom)
  const [center, setCenter] = useState<Position>({
    lat: latitude,
    lng: longitude,
  })

  const { aggregatedFarmData, detailedFarmData, setFilter, isSuccess } =
    useUpdateFarmDataBasedOnZoom({ zoom, mapCoordinates: bounds })
  console.log('isSuccess', isSuccess)
  const onMapLoad = (mapEvent: MapEvent) => {
    setBounds(
      calculateClosedRectangleCoordinates(
        mapEvent.map.getBounds() as google.maps.LatLngBounds
      )
    )
  }
  const handleZoomChange = (ev: MapCameraChangedEvent) => {
    setZoom(ev.detail.zoom)
    if (ev.detail.center)
      setCenter({ lat: ev.detail.center.lat, lng: ev.detail.center.lng })
    const boundsLiteral = ev.detail.bounds
    if (boundsLiteral) {
      const filter = calculateClosedRectangleCoordinates(boundsLiteral)
      dispatch(
        setSelectedLocation({
          city_name: MAP_AREA_INPUT,
          latitude: ev.detail.center.lat,
          longitude: ev.detail.center.lng,
          view: filter,
        })
      )
      dispatch(setMapState({ zoom: ev.detail.zoom }))
      setFilter(filter)
    }
  }

  const handleDrag = (event: MapEvent) => {
    const bounds = event.map.getBounds()
    if (bounds) {
      const filter = calculateClosedRectangleCoordinates(bounds)
      if (event.map.getCenter() !== undefined) {
        setCenter({
          lat: event.map.getCenter()?.lat() as number,
          lng: event.map.getCenter()?.lng() as number,
        })
        dispatch(
          setSelectedLocation({
            city_name: MAP_AREA_INPUT,
            latitude: event.map.getCenter()?.lat() as number,
            longitude: event.map.getCenter()?.lng() as number,
            view: filter,
          })
        )
      }
      setFilter(filter)
    }
  }
  return (
    <Box id="mapContainer" style={{ width: '100%', height: '100%' }}>
      <APIProvider apiKey={import.meta.env.VITE_GOOGLEMAP_API_KEY}>
        <Map
          style={{ borderRadius: '16px' }}
          defaultZoom={storedZoom}
          defaultCenter={center}
          mapId={'ec57cbe629242726'}
          maxZoom={MAX_ZOOM}
          minZoom={MIN_ZOOM}
          onZoomChanged={debounce(handleZoomChange, 500)}
          onDragend={debounce(handleDrag, 500)}
          gestureHandling={'greedy'}
          clickableIcons={false}
          fullscreenControl={false}
          mapTypeControl={false}
          zoomControl={isMobileOrTablet ? false : true}
          streetViewControl={false}
          onTilesLoaded={onMapLoad}
        >
          {isSuccess &&
            (zoom <= CLUSTER_SWITCH_ZOOM_LEVEL ? (
              <CustomMarkers points={aggregatedFarmData}></CustomMarkers>
            ) : (
              <CustomMarkers points={detailedFarmData}></CustomMarkers>
            ))}
          {isSuccess &&
            (isMobile ? (
              <Box sx={styles.buttonContainer}>
                <Button sx={styles.mobileFilterContainer}>
                  <FilterListIcon sx={styles.mobileFilter} />
                </Button>
              </Box>
            ) : (
              <Box sx={styles.buttonContainer}>
                <Button
                  onClick={() => {
                    navigate('/farms')
                  }}
                >
                  <Typography
                    variant="paragraph-medium"
                    sx={styles.buttonContent}
                  >
                    <ListIcon />
                    Show List
                  </Typography>
                </Button>
              </Box>
            ))}
          <CompassButton setUserLocationAsCenter={setUserLocationAsCenter} />
        </Map>
      </APIProvider>
    </Box>
  )
}

export default InteractiveMap
"
explain if I drag the map, the flow of change for state causing rerender and how many times will "isSuccess" print and explain why?