import React, { useEffect, useState, useRef } from 'react';

import { View, Text, Image, TouchableOpacity } from 'react-native';

import MapView, { Polyline, Marker } from 'react-native-maps';

import Geolocation from '@react-native-community/geolocation';

​

interface Coordinate {

  latitude: number;

  longitude: number;

}

​

interface Step {

  instructions: string;

  distance: number;

  duration: number;

  maneuver: string;

  start_location: Coordinate;

  end_location: Coordinate;

  polyline: { points: string; coordinates: Coordinate[] };

}

​

const MapScreen: React.FC = () => {

  const [currentLocation, setCurrentLocation] = useState<Coordinate | null>(

    null

  );

  const [routeCoordinates, setRouteCoordinates] = useState<Coordinate[]>([]);

  const [steps, setSteps] = useState<Step[]>([]);

  const [remainingSteps, setRemainingSteps] = useState<Step[]>([]);

  const [distance, setDistance] = useState<number | null>(null);

  const [duration, setDuration] = useState<number | null>(null);

  const [arrowRotation, setArrowRotation] = useState<number>(0);

  const mapRef = useRef<MapView>(null);

​

  useEffect(() => {

    // Get the current location and update the state

    Geolocation.watchPosition(

      (position) => {

        const { latitude, longitude } = position.coords;

        setCurrentLocation({ latitude, longitude });

      },

      (error) => console.log(error),

      {

        enableHighAccuracy: true,

        timeout: 20000,

        maximumAge: 1000,

        distanceFilter: 10,

      }

    );

  }, []);

​

  useEffect(() => {

    // Update the map based on the current location and route data

    // Update the route coordinates, steps, remaining steps, distance, and duration

​

    // Update the arrow rotation based on the current location and route coordinates

    // Example code to update arrow rotation randomly

    const randomRotation = Math.floor(Math.random() * 360);

    setArrowRotation(randomRotation);

  }, [currentLocation, routeCoordinates, steps]);

​

  const onRegionChange = (region: any) => {

    // Handle the region change if needed

  };

​

  const recenterMap = () => {

    // Recenter the map on the current location

    if (currentLocation && mapRef.current) {

      mapRef.current.animateToRegion({

        latitude: currentLocation.latitude,

        longitude: currentLocation.longitude,

        latitudeDelta: 0.0922,

        longitudeDelta: 0.0421,

      });

    }

  };

​

  return (

    <View style={{ flex: 1 }}>

      <MapView

        ref={mapRef}

        style={{ flex: 1 }}

        initialRegion={{

          latitude: currentLocation?.latitude || 0,

          longitude: currentLocation?.longitude || 0,

          latitudeDelta: 0.0922,

          longitudeDelta: 0.0421,

        }}

        showsUserLocation={true}

        onRegionChange={onRegionChange}

      >

        {/* Render the route coordinates as a Polyline */}

        {routeCoordinates.length > 0 && (

          <Polyline

            coordinates={routeCoordinates}

            strokeWidth={3}

            strokeColor="#1a73e8"

          />

        )}

​

        {/* Render the remaining steps as Polylines */}

        {remainingSteps.length > 0 &&

          remainingSteps.map((step, index) => (

            <Polyline

              key={index}

              coordinates={step.polyline.coordinates}

              strokeWidth={3}

              strokeColor="#1a73e8"

            />

          ))}

​

        {/* Render the current location marker with arrow icon */}

        {currentLocation && (

          <Marker coordinate={currentLocation}>

            <Image

              source={require('../../utils/Images/arrow.png')}

              style={{ width: 32, height: 32, transform: [{ rotate: `${arrowRotation}deg` }] }}

            />

          </Marker>

        )}

      </MapView>

​

      {/* Recenter button */}

      <TouchableOpacity

        style={{

          position: 'absolute',

          top: 16,

          right: 16,

          backgroundColor: 'white',

          padding: 8,

          borderRadius: 4,

        }}

        onPress={recenterMap}

      >

        <Image

          source={require('../../utils/Images/location.png')}

          style={{ width: 32, height: 32 }}

        />

      </TouchableOpacity>

​

      {/* Distance and duration information */}

      <View

        style={{

          position: 'absolute',

          bottom: 0,

          left: 0,

          right: 0,

          backgroundColor: '#FFF',

          padding: 16,

        }}

      >

        <Text>Distance: {distance} meters</Text>

        <Text>Duration: {duration} seconds</Text>

      </View>

    </View>

  );

};

​

export default MapScreen;