Untitled

import { GeoPointC } from '@lastmile-lt/shared';
import { YStack } from 'tamagui';
import { GoogleMap, MarkerF } from '@react-google-maps/api';
import { mapStyles } from '@lastmile-lt/shared_react/src/theme/map_styles';
import { useEffect, useRef } from 'react';

type MarkerType = 'address' | 'employee' | 'store';

export interface MapMarker extends Pick<GeoPointC, 'latitude' | 'longitude'> {
  type: MarkerType;
}

interface MapSectionProps {
  markers: MapMarker[];
  center: GeoPointC;
  paths?: MapMarker[];
}

const MapSection = ({ markers, center, paths }: MapSectionProps) => {
  const mapHeight = 400;
  const coordinates = markers.map((marker) => ({
    lat: marker.latitude,
    lng: marker.longitude,
    type: marker.type,
  }));

  ///////// EXPERIMENTS //////////

  const mapRef = useRef<google.maps.Map | null>(null);
  const boundsRef = useRef<google.maps.LatLngBounds | null>(null);
  ////TODO EXAMPLE MARKERS
  // const markersE = [
  //   { lat: 37.123, lng: -122.456 }, // Example start point
  //   { lat: 37.789, lng: -122.789 }, // Example end point
  // ];

  useEffect(() => {
    if (mapRef.current && coordinates.length > 0) {
      const bounds = new window.google.maps.LatLngBounds();
      coordinates.forEach((coordinate) => {
        bounds.extend(coordinate);
      });
      boundsRef.current = bounds;
      mapRef.current.fitBounds(bounds);
    }
  }, [coordinates]);

  const latLngBounds = useRef<google.maps.LatLngBounds | null>(null);

  const getMarkerIcon = (coordinateType: MarkerType) => {
    switch (coordinateType) {
      case 'address':
        return '/home.png';
      case 'employee':
        return '/shopper.png';
      case 'store':
        return '/store.png';
    }
  };

  // const onLoad = (map: google.maps.Map) => {
  //   if (latLngBounds.current && coordinates.length > 0) {
  //     map.fitBounds(latLngBounds.current);
  //   }
  // };

  return (
    <YStack height={mapHeight} width="100%" paddingBottom={10}>
      <GoogleMap
        center={{ lat: center.latitude, lng: center.longitude }}
        mapContainerStyle={{
          width: '100%',
          height: `${mapHeight}px`,
        }}
        zoom={15}
        options={{ styles: mapStyles() }}
        onLoad={(map) => {
          mapRef.current = map;
        }}
      >
        <>
          {/* {markersE.map((marker, index) => (
            <MarkerF key={index} position={marker} />
          ))} */}
          {coordinates.map((coordinate) => (
            <MarkerF
              position={coordinate}
              key={`${coordinate.lat}${coordinate.lng}`}
              icon={{
                url: getMarkerIcon(coordinate.type),
                scale: 5,
              }}
            />
          ))}
          {paths && paths.length > 0 && (
            <>
              {paths.map((path, i) => (
                <MarkerF
                  key={`${path.latitude}${path.longitude}`}
                  position={{
                    lat: path.latitude,
                    lng: path.longitude,
                  }}
                  icon={{
                    url: getMarkerIcon(path.type),
                    scale: 5,
                  }}
                  label={(i + 1).toString()}
                />
              ))}
            </>
          )}
        </>
      </GoogleMap>
    </YStack>
  );
};

export { MapSection };