export const CommunityMap: React.FC<Props> = ({ expandMap = false, ...community }) => {
  const [page] = useQueryState('tab', 'here');
  const [tripId] = useQueryState('trip');
  const router = useRouter();
  const { isMobile } = React.useContext(LayoutContext);

  const [selectedDate, setSelectedDate] = React.useState<number>(0);

  // Generate the array of dates for the next 30 days
  const dates = Array.from({ length: 30 }, (_, i) => addDays(new Date(), i));

  // Get the display label for the marks
  // const marks = dates.map((date, index) => ({
  //   value: index,
  //   label: format(date, 'MMM dd'),
  // }));

  const handleSliderChange = React.useCallback((event: any, newValue: any) => {
    setSelectedDate(newValue);
  }, []);

  const { user } = React.useContext(UserContext);
  const { openDialog } = React.useContext(DialogContext);

  const [showHeatmap, setShowHeatmap] = React.useState(false);

  const { trips } = useTrips({
    user: user?.id,
  });

  const currTripIdx = React.useMemo(() => {
    if (tripId) {
      return findIndex(trips, trip => trip.id === parseInt(tripId, 10));
    }
  }, [trips, tripId]);

  const currTrip = React.useMemo(() => {
    if (currTripIdx !== undefined) {
      return trips[currTripIdx];
    }
  }, [trips, currTripIdx]);

  const prevTrip = React.useMemo(() => {
    if (currTripIdx !== undefined) {
      return trips[currTripIdx - 1];
    }
  }, [trips, currTripIdx]);

  const nextTrip = React.useMemo(() => {
    if (currTripIdx !== undefined) {
      return trips[currTripIdx + 1];
    }
  }, [trips, currTripIdx]);

  const { members: communityMembers, status: communityMembersStatus } = useMembers({
    communityId: community.id.toString(),
    dateGte: showHeatmap ? startOfDay(dates[selectedDate]) : currTrip?.arrivalDatetime,
    dateLte: showHeatmap ? endOfDay(dates[selectedDate]) : currTrip?.departureDatetime,
  });

  const showHeatToggle = React.useMemo(() => {
    if (isBeta || (user?.id && [13, 15, 241, 223, 11, 5, 166, 1781].includes(user.id))) {
      return true;
    }
    return false;
  }, [user]);

  const members = React.useMemo(() => {
    return communityMembers.filter(user => user.status === 'active');
  }, [communityMembers]);
  
  const [map, setMap] = React.useState<any>();

  const coords: Coordinates = React.useMemo(() => {
    const boundaries = members.reduce((prev, curr) => {
      const bounds = { ...prev };
      // @ts-ignore
      const userLocation = curr.trip?.location || curr.baseLocation || curr.location;

      if (userLocation && userLocation.latitude && userLocation.longitude) {
        if (userLocation.latitude < bounds.minLat) {
          bounds.minLat = userLocation.latitude;
        }
        if (userLocation.latitude > bounds.maxLat) {
          bounds.maxLat = userLocation.latitude;
        }
        if (userLocation.longitude < bounds.minLng) {
          bounds.minLng = userLocation.longitude;
        }
        if (userLocation.longitude > bounds.maxLng) {
          bounds.maxLng = userLocation.longitude;
        }
      }

      return bounds;
    }, {
      minLat: user?.baseLocation?.latitude || 0,
      minLng: user?.baseLocation?.longitude || 0,
      maxLat: user?.baseLocation?.latitude || 0,
      maxLng: user?.baseLocation?.longitude || 0,
    });

    const distance = calculateDistance(boundaries.minLat, boundaries.minLng, boundaries.maxLat, boundaries.maxLng);

    const coords = currTrip ? {
      lat: currTrip.location.latitude,
      lng: currTrip.location.longitude,
    } : {
      // If all users located too close to each other (less than 100 km) - increase zoom out distance
      minLat: distance < 100 ? boundaries.minLat - 0.4 : boundaries.minLat,
      minLng: distance < 100 ? boundaries.minLng - 0.4 : boundaries.minLng,
      maxLat: distance < 100 ? boundaries.maxLat + 0.4 : boundaries.maxLat,
      maxLng: distance < 100 ? boundaries.maxLng + 0.4 : boundaries.maxLng,
      lat: (boundaries.minLat + boundaries.maxLat) / 2,
      lng: (boundaries.minLng + boundaries.maxLng) / 2,
    };

    return coords;
  }, [currTrip, members, user?.baseLocation]);

  const points = React.useMemo(() => {
    const points: Locations.Location[] = [];
    const dateFrom = currTrip?.arrivalDatetime;
    const dateTo = currTrip?.departureDatetime;
  
    members.forEach(user => {

      const travelInterval = dateFrom && dateTo ? { start: dateFrom, end: dateTo } : null;

      let daysWithoutTravel = travelInterval ? eachDayOfInterval(travelInterval).length : 1;

      if (!travelInterval && user.trips.length > 0) {
        daysWithoutTravel = 0;
      }

      user.trips.forEach(trip => {
        points.push(trip.location);

        if (travelInterval) {
          const overlappingDays = getOverlappingDaysInIntervals(
            travelInterval,
            { start: trip.arrivalDatetime, end: trip.departureDatetime },
          );

          daysWithoutTravel -= overlappingDays;
        }
      });

      const baseLocation = user.baseLocation;

      if (baseLocation && daysWithoutTravel) {
        points.push(baseLocation);
      }
    });

    return points;
  }, [members, currTrip]);

  const topCities = React.useMemo(() => {
    const cityCounts = points.reduce((acc, location) => {
      const city = location.title;
      if (city) {
        if (!acc[city]) {
          acc[city] = 0;
        }
        acc[city]++;
      }
      return acc;
    }, {} as any);
  
    const sortedCities = Object.entries(cityCounts).sort((a: any, b: any) => b[1] - a[1]);
    return sortedCities.slice(0, 5).map(([city, count]) => ({
      city,
      count,
      percentage: ((count as number / points.length) * 100).toFixed(0),
    }));
  }, [points]);

  const setView = React.useCallback((tab: string) => {
    if (tab === 'here') {
      router.communities.view(community.handle || community.id).go({ tab: 'here', trip: undefined, lat: undefined, lng: undefined }, true);
    }
    if (tab === 'there') {
      router.communities.view(community.handle || community.id).go({ tab: 'there', trip: trips[0].id, lat: undefined, lng: undefined }, true);
    }
  }, [community.handle, community.id, router.communities, trips]);

  const toggleHeatMap = React.useCallback(() => {
    setShowHeatmap(state => !state);
  }, []);

  React.useEffect(() => {
    if (!page) {
      router.communities.view(community.handle || community.id).go({ tab: 'here' }, true);
    }
  }, [community.handle, community.id, page, router]);

  React.useEffect(() => {
    if (!expandMap) {
      if (page !== 'here') {
        setView('here');
      }
      if (showHeatmap) {
        setShowHeatmap(false);
      }
    }
  }, [expandMap, setView, setShowHeatmap, page, showHeatmap]);

  React.useEffect(() => {
    if (page === 'here' && isBoundaryCoordinates(coords)) {
      setTimeout(() => {
        map?.fitBounds({
          north: coords.maxLat,
          east: coords.maxLng,
          south: coords.minLat,
          west: coords.minLng,
        });
      }, 500);
    }
  }, [expandMap, map, coords, page]);

  if (communityMembersStatus === 'error' || !communityMembers) {
    return <MessageFeedbackView height="100%"/>;
  }

  return (
    <>
      {communityMembersStatus === 'loading' && (
        <Box zIndex={1} position="absolute" sx={theme => ({ opacity: 0.8, backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.primary.dark })} height="100%" width="100%">
          <BodyLoading height={700} />
        </Box>
      )}
      <Stack height="100%">
        <Box height="100%">
          {showHeatmap ? (
            <UsersHeatmap
              coords={coords}
              users={members}
              // contacts={filteredContacts}
              draggable={expandMap}
              // We have expanding map
              // By default map will not raise onChange event if parent size has changed
              // To change such behavior add resetBoundsOnResize = {true} property
              resetBoundsOnResize
              onGoogleApiLoaded={(data) => {
                setMap(data.map);
              }}
              dateFrom={currTrip?.arrivalDatetime}
              dateTo={currTrip?.departureDatetime}
            />
          ) : (
            <UsersMap
              coords={coords}
              users={members}
              // contacts={filteredContacts}
              draggable={expandMap}
              // We have expanding map
              // By default map will not raise onChange event if parent size has changed
              // To change such behavior add resetBoundsOnResize = {true} property
              resetBoundsOnResize
              onGoogleApiLoaded={(data) => {
                setMap(data.map);
              }}
              dateFrom={currTrip?.arrivalDatetime}
              dateTo={currTrip?.departureDatetime}
            />
          )}
        </Box>
      </Stack>
    </>
  );
};

import React from 'react';
import { eachDayOfInterval, getOverlappingDaysInIntervals } from 'date-fns';
import { ChangeEventValue, Props as GoogleMapProps } from 'google-map-react';

import { Map } from '@shared/components/Map/Map';
import { googleMapsApiKey } from '@shared/config';

import { ClusterPoint } from './ClusterPin';

export const isBoundaryCoordinates = (coords: Coordinates): coords is BoundaryCoordinates => {
  return ('minLat' in coords) && !!coords.minLat && !!coords.minLng && !!coords.maxLat && !!coords.maxLng;
};

export type SimpleCoordinates = {
  lat: number;
  lng: number;
}

export type BoundaryCoordinates = {
  lat: number;
  lng: number;
  minLat: number;
  minLng: number;
  maxLat: number;
  maxLng: number;
}

export type Coordinates = SimpleCoordinates | BoundaryCoordinates;


interface Props extends Omit<GoogleMapProps, 'heatmap' | 'heatmapLibrary'> {
  coords: Coordinates;
  defaultZoom?: number;
  draggable?: boolean;
  users: Users.User[],
  contacts?: Contacts.Contact[],
  onChange?: (values: ChangeEventValue) => void;
  dateFrom?: Date;
  dateTo?: Date;
}

export const UsersHeatmap: React.FC<Props> = ({
  coords,
  defaultZoom = 7,
  draggable = true,
  users,
  contacts = [],
  onChange,
  dateFrom,
  dateTo,
  ...props
}) => {

  const [map, setMap] = React.useState<any>();
  const [zoom, setZoom] = React.useState<number>(defaultZoom);

  const clusterPoints = React.useMemo(() => {
    const clusterPoints: ClusterPoint[] = [];

    users.forEach(user => {

      const travelInterval = dateFrom && dateTo ? { start: dateFrom, end: dateTo } : null;

      let daysWithoutTravel = travelInterval ? eachDayOfInterval(travelInterval).length : 1;

      // User has a trip but there is no travel interval, meaning he has a trip today.
      if (!travelInterval && user.trips.length > 0) {
        daysWithoutTravel = 0;
      }

      user.trips.forEach(trip => {
        clusterPoints.push({
          type: 'Feature',
          properties: {
            cluster: false,
            user: {
              ...user,
              trips: [trip],
            },
          },
          geometry: {
            type: 'Point',
            coordinates: [trip.location.longitude, trip.location.latitude],
          },
        });

        if (travelInterval) {
          const overlappingDays = getOverlappingDaysInIntervals(
            travelInterval,
            { start: trip.arrivalDatetime, end: trip.departureDatetime },
          );

          daysWithoutTravel -= overlappingDays;
        }
      });

      const baseLocation = user.baseLocation;

      if (baseLocation && daysWithoutTravel) {
        clusterPoints.push({
          type: 'Feature',
          properties: {
            cluster: false,
            user: {
              ...user,
              trips: [],
            },
          },
          geometry: {
            type: 'Point',
            coordinates: [baseLocation?.longitude, baseLocation?.latitude],
          },
        });
      }
    });

    contacts.forEach(contact => {
      const location = contact.location;

      if (location) {
        clusterPoints.push({
          type: 'Feature',
          properties: { cluster: false, contact },
          geometry: {
            type: 'Point',
            coordinates: [location?.longitude, location?.latitude],
          },
        });
      }
    });

    return clusterPoints;
  }, [users, contacts, dateFrom, dateTo]);

  const onMapChange = React.useCallback((props: ChangeEventValue) => {
    const { zoom } = props;
    setZoom(zoom);
    onChange && onChange(props);
  }, [onChange]);

  React.useEffect(() => {
    if (isBoundaryCoordinates(coords)) {
      map?.fitBounds({
        north: coords.maxLat, 
        east: coords.maxLng, 
        south: coords.minLat, 
        west: coords.minLng,
      });
    }
  }, [users, coords, map]);

  return (
    <Map
      {...props}
      options={{ zoomControl: false }}
      lat={coords.lat}
      lng={coords.lng}
      defaultZoom={defaultZoom}
      zoom={zoom}
      center={{ lat: coords.lat, lng: coords.lng }}
      onChange={onMapChange}
      draggable={draggable}
      onGoogleApiLoaded={(data) => {
        setMap(data.map);
        props.onGoogleApiLoaded && props.onGoogleApiLoaded(data);
      }}
      bootstrapURLKeys={{
        key: googleMapsApiKey,
        // https://stackoverflow.com/a/27054207/12347085
        libraries: ['visualization'],
      }}
      heatmap={{    
        positions: clusterPoints.map(point => ({
          lat: point.geometry.coordinates[1],
          lng: point.geometry.coordinates[0],
        })),
        options: {   
          radius: 30,   
          opacity: 0.6,
        },
      }}
    />
  );
};

import React, { ComponentClass, FC, ReactElement } from 'react';
import { useTheme } from '@mui/material';
import GoogleMap, { Props as GoogleMapProps } from 'google-map-react';
import noop from 'lodash/noop';

import { googleMapsApiKey } from '@shared/config';

import { dark } from './Map.dark.styles';
import { light } from './Map.light.styles';


const ReactGoogleMap = GoogleMap as ComponentClass<GoogleMapProps>;

interface MarkerProps {
  lat: number,
  lng: number,
  children: ReactElement<any, any>,
}

export const Marker: FC<MarkerProps> = ({ children }) => children;

export const Map: FC<{ lat: number, lng: number } & GoogleMapProps> = ({
  lat,
  lng,
  children,
  defaultZoom = 14,
  onChange = noop,
  ...props
}) => {

  const theme = useTheme();

  const styles = theme.palette.mode === 'dark' ? dark : light;

  return (
    <ReactGoogleMap
      bootstrapURLKeys={{ key: googleMapsApiKey }}
      center={{ lat, lng }}
      defaultCenter={props.defaultCenter}
      defaultZoom={defaultZoom}
      {...props}
      onChange={onChange}
      options={{
        styles,
        fullscreenControl: false,
        ...props.options,
      }}
      yesIWantToUseGoogleMapApiInternals
    >
      {children}
    </ReactGoogleMap>
  );
};

  "dependencies": {
    "@byteowls/capacitor-sms": "5.0.0",
    "@capacitor-community/contacts": "5.0.5",
    "@capacitor-community/fcm": "6.0.0",
    "@capacitor-firebase/authentication": "6.0.0",
    "@capacitor/android": "6.1.0",
    "@capacitor/app": "6.0.0",
    "@capacitor/browser": "6.0.1",
    "@capacitor/clipboard": "^6.0.1",
    "@capacitor/core": "6.1.0",
    "@capacitor/geolocation": "6.0.0",
    "@capacitor/ios": "6.1.0",
    "@capacitor/keyboard": "6.0.1",
    "@capacitor/push-notifications": "6.0.1",
    "@capacitor/share": "6.0.1",
    "@capawesome/capacitor-badge": "6.0.0",
    "@emotion/react": "11.11.3",
    "@emotion/styled": "11.11.0",
    "@hotjar/browser": "1.0.9",
    "@mui/icons-material": "5.16.5",
    "@mui/lab": "5.0.0-alpha.122",
    "@mui/material": "5.11.12",
    "@mui/x-date-pickers-pro": "7.11.1",
    "@react-spring/web": "^9.7.4",
    "@sandstreamdev/react-swipeable-list": "^1.0.2",
    "@sentry/react": "7.102.0",
    "@sentry/vite-plugin": "2.16.1",
    "@talkjs/react": "0.1.7",
    "@tanstack/react-query": "4.26.1",
    "@tanstack/react-virtual": "3.0.1",
    "@types/google-libphonenumber": "^7.4.30",
    "@types/google-map-react": "^2.1.10",
    "axios": "1.3.4",
    "capacitor-native-settings": "6.0.0",
    "capacitor-plugin-app-tracking-transparency": "2.0.5",
    "chalk": "4.1.2",
    "clear": "0.1.0",
    "date-fns": "2.29.3",
    "date-fns-tz": "2.0.1",
    "figlet": "1.5.2",
    "firebase": "9.17.2",
    "framer-motion": "^11.3.30",
    "geojson": "0.5.0",
    "google-libphonenumber": "^3.2.34",
    "google-map-react": "^2.2.1",
    "inquirer": "8.0.0",
    "jsdom": "21.1.1",
    "lodash": "4.17.21",
    "query-string": "8.1.0",
    "react": "18.3.1",
    "react-device-detect": "2.2.3",
    "react-dom": "18.3.1",
    "react-facebook-pixel": "1.0.4",
    "react-firebase-hooks": "5.1.1",
    "react-hook-form": "7.43.5",
    "react-international-phone": "^4.2.9",
    "react-markdown": "9.0.1",
    "react-qr-code": "^2.0.15",
    "react-router": "6.9.0",
    "react-router-dom": "6.9.0",
    "react-spinners": "0.13.8",
    "react-text-loop": "^2.3.0",
    "react-tinder-card": "^1.6.4",
    "react-use": "17.4.0",
    "rimraf": "4.4.0",
    "sanitize-html": "2.10.0",
    "supercluster": "8.0.1",
    "talkjs": "0.18.0",
    "use-supercluster": "1.1.0",
    "web-vitals": "3.3.0"
  }