MapView.tsx

/* eslint-disable @typescript-eslint/no-unused-vars */
import {useFocusEffect, useNavigation} from '@react-navigation/native';
import type {MapState} from '@rnmapbox/maps';
import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps';
import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
import type {GestureResponderEvent, PanResponderCallbacks, PanResponderGestureState} from 'react-native';
import { View, PanResponder } from 'react-native';
import {withOnyx} from 'react-native-onyx';
import useThemeStyles from '@hooks/useThemeStyles';
import setUserLocation from '@libs/actions/UserLocation';
import compose from '@libs/compose';
import getCurrentPosition from '@libs/getCurrentPosition';
import CONST from '@src/CONST';
import useLocalize from '@src/hooks/useLocalize';
import useNetwork from '@src/hooks/useNetwork';
import ONYXKEYS from '@src/ONYXKEYS';
import type { GestureSettings } from '@rnmapbox/maps/lib/typescript/src/components/MapView';
import Direction from './Direction';
import type {MapViewHandle} from './MapViewTypes';
import PendingMapView from './PendingMapView';
import responder from './responder';
import type {ComponentProps, MapViewOnyxProps} from './types';
import utils from './utils';


const gestureSettings: Required<GestureSettings> = {
    doubleTapToZoomInEnabled: true,
    doubleTouchToZoomOutEnabled: true,
    pinchPanEnabled: true,
    pinchZoomEnabled: true,
    pinchZoomDecelerationEnabled: true,
    pitchEnabled: true,
    quickZoomEnabled: true,
    rotateEnabled: true,
    rotateDecelerationEnabled: true,
    panEnabled: true,
    panDecelerationFactor: 1,
    simultaneousRotateAndPinchZoomEnabled: true,
    zoomAnimationAmount: 1
}

const panResponderCaptureHandler: Required<PanResponderCallbacks> = {
    onMoveShouldSetPanResponder: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
        console.log(`___________ onMoveShouldSetPanResponder ___________`, gestureState);
        return true;
    },
    onStartShouldSetPanResponder (e: GestureResponderEvent, gestureState: PanResponderGestureState): boolean {
        console.log('___________ onStartShouldSetPanResponder ___________',   );
        return true;
    },
    onPanResponderGrant (e: GestureResponderEvent, gestureState: PanResponderGestureState): void {
        console.log('___________ onPanResponderGrant ___________',   );
    },
    onPanResponderMove (e: GestureResponderEvent, gestureState: PanResponderGestureState): void {
        console.log('___________ onPanResponderMove ___________',   );
    },
    onPanResponderRelease (e: GestureResponderEvent, gestureState: PanResponderGestureState): void {
        console.log('___________ onPanResponderRelease ___________',   );
    },
    onPanResponderTerminate (e: GestureResponderEvent, gestureState: PanResponderGestureState): void {
        console.log('___________ ::onPanResponderTerminate:: ___________', e);
    },
    onMoveShouldSetPanResponderCapture (e: GestureResponderEvent, gestureState: PanResponderGestureState): boolean {
        console.log('___________ onMoveShouldSetPanResponderCapture ___________',   );
        return true;
    },
    onStartShouldSetPanResponderCapture (e: GestureResponderEvent, gestureState: PanResponderGestureState): boolean {
        console.log('___________ onStartShouldSetPanResponderCapture ___________',   );
        return true;
    },
    onPanResponderReject (e: GestureResponderEvent, gestureState: PanResponderGestureState): void {
        console.log('___________ onPanResponderReject ___________',   );
    },
    onPanResponderStart (e: GestureResponderEvent, gestureState: PanResponderGestureState): void {
        console.log('___________ onPanResponderStart ___________',   );
    },
    onPanResponderEnd (e: GestureResponderEvent, gestureState: PanResponderGestureState): void {
        console.log('___________ onPanResponderEnd ___________',   );
    },
    onPanResponderTerminationRequest (e: GestureResponderEvent, gestureState: PanResponderGestureState): boolean {
        console.log('___________ onPanResponderTerminationRequest ___________',   );
        return false;
    },
    onShouldBlockNativeResponder (e: GestureResponderEvent, gestureState: PanResponderGestureState): boolean {
        console.log('___________ onShouldBlockNativeResponder ___________',   );
        return true;
    }
}

const responderCapture = PanResponder.create(panResponderCaptureHandler);


const MapView = forwardRef<MapViewHandle, ComponentProps>(
    ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => {
        const navigation = useNavigation();
        const {isOffline} = useNetwork();
        const {translate} = useLocalize();
        const styles = useThemeStyles();

        const cameraRef = useRef<Mapbox.Camera>(null);
        const [isIdle, setIsIdle] = useState(false);
        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
        const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
        const shouldInitializeCurrentPosition = useRef(true);

        // Determines if map can be panned to user's detected
        // location without bothering the user. It will return
        // false if user has already started dragging the map or
        // if there are one or more waypoints present.
        const shouldPanMapToCurrentPosition = useCallback(() => !userInteractedWithMap && (!waypoints || waypoints.length === 0), [userInteractedWithMap, waypoints]);

        const setCurrentPositionToInitialState = useCallback(() => {
            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
            if (cachedUserLocation || !initialState) {
                return;
            }
            setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
        }, [initialState, cachedUserLocation]);

        useFocusEffect(
            useCallback(() => {
                if (isOffline) {
                    return;
                }

                if (!shouldInitializeCurrentPosition.current) {
                    return;
                }

                shouldInitializeCurrentPosition.current = false;

                if (!shouldPanMapToCurrentPosition()) {
                    setCurrentPositionToInitialState();
                    return;
                }

                getCurrentPosition((params) => {
                    const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
                    setCurrentPosition(currentCoords);
                    setUserLocation(currentCoords);
                }, setCurrentPositionToInitialState);
            }, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]),
        );

        useEffect(() => {
            if (!currentPosition || !cameraRef.current) {
                return;
            }

            if (!shouldPanMapToCurrentPosition()) {
                return;
            }
            console.log(`___________ SetCamera:1 ___________`);
            cameraRef.current.setCamera({
                zoomLevel: CONST.MAPBOX.DEFAULT_ZOOM,
                animationDuration: 1500,
                centerCoordinate: [currentPosition.longitude, currentPosition.latitude],
            });
        }, [currentPosition, shouldPanMapToCurrentPosition]);

        useImperativeHandle(
            ref,
            () => ({
                flyTo: (location: [number, number], zoomLevel: number = CONST.MAPBOX.DEFAULT_ZOOM, animationDuration?: number) =>
                    cameraRef.current?.setCamera({zoomLevel, centerCoordinate: location, animationDuration}),
                fitBounds: (northEast: [number, number], southWest: [number, number], paddingConfig?: number | number[] | undefined, animationDuration?: number | undefined) =>
                    cameraRef.current?.fitBounds(northEast, southWest, paddingConfig, animationDuration),
            }),
            [],
        );

        // When the page loses focus, we temporarily set the "idled" state to false.
        // When the page regains focus, the onIdled method of the map will set the actual "idled" state,
        // which in turn triggers the callback.
        useFocusEffect(
            useCallback(() => {
                if (!waypoints || waypoints.length === 0 || !isIdle) {
                    return;
                }

                if (waypoints.length === 1) {
                    console.log(`___________ SetCamera:2 ___________`);
                    cameraRef.current?.setCamera({
                        zoomLevel: CONST.MAPBOX.SINGLE_MARKER_ZOOM,
                        animationDuration: 1500,
                        centerCoordinate: waypoints[0].coordinate,
                    });
                } else {
                    const {southWest, northEast} = utils.getBounds(
                        waypoints.map((waypoint) => waypoint.coordinate),
                        directionCoordinates,
                    );
                    console.log(`___________ FitBounds ___________`);
                    cameraRef.current?.fitBounds(northEast, southWest, mapPadding, 1000);
                }
            }, [mapPadding, waypoints, isIdle, directionCoordinates]),
        );

        useEffect(() => {
            const unsubscribe = navigation.addListener('blur', () => {
                setIsIdle(false);
            });
            return unsubscribe;
        }, [navigation]);

        useEffect(() => {
            setAccessToken(accessToken);
        }, [accessToken]);

        const setMapIdle = (e: MapState) => {
            if (e.gestures.isGestureActive) {
                return;
            }
            setIsIdle(true);
            if (onMapReady) {
                onMapReady();
            }
        };

        return !isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
            <View style={[style, !interactive ? styles.pointerEventsNone : {}]}>
                <Mapbox.MapView
                    style={{flex: 1}}
                    styleURL={styleURL}
                    onMapIdle={setMapIdle}
                    onTouchStart={() => setUserInteractedWithMap(true)}
                    pitchEnabled={pitchEnabled}
                    attributionPosition={{...styles.r2, ...styles.b2}}
                    scaleBarEnabled={false}
                    // gestureSettings={gestureSettings}
                    logoPosition={{...styles.l2, ...styles.b2}}
                    // eslint-disable-next-line react/jsx-props-no-spreading
                    {...responderCapture.panHandlers}
                >
                    <Mapbox.Camera
                        ref={cameraRef}
                        defaultSettings={{
                            centerCoordinate: currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location,
                            zoomLevel: initialState?.zoom,
                        }}
                    />

                    {waypoints?.map(({coordinate, markerComponent, id}) => {
                        const MarkerComponent = markerComponent;
                        return (
                            <MarkerView
                                id={id}
                                key={id}
                                coordinate={coordinate}
                            >
                                <MarkerComponent />
                            </MarkerView>
                        );
                    })}

                    {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                </Mapbox.MapView>
            </View>
        ) : (
            <PendingMapView
                title={translate('distance.mapPending.title')}
                subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
                style={styles.mapEditView}
            />
        );
    },
);

export default compose(
    withOnyx<ComponentProps, MapViewOnyxProps>({
        userLocation: {
            key: ONYXKEYS.USER_LOCATION,
        },
    }),
    memo,
)(MapView);