#maps Component

import {
  Dimensions,
  Image,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import MapView, {
  AnimatedRegion,
  Marker,
  Animated as AnimatedMap,
} from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
import MapViewDirections from 'react-native-maps-directions';
import {useTheme} from 'react-native-paper';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
import {GOOGLE_MAPS_APIKEY} from '../../constants/googlekey';
import mapIcons from '../../constants/mapIcons';
import {getCurrentLocation, locationPermission} from './helper';
// const origin = {latitude: 37.3318456, longitude: -122.0296002};
// const destination = {latitude: 37.771707, longitude: -122.4053769};
const {width, height} = Dimensions.get('window');

const screen = Dimensions.get('window');
const ASPECT_RATIO = screen.width / screen.height;
const LATITUDE_DELTA = 0.6;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

function isCoordinateInRegion(coordinate, region) {
  const top = region.latitude + region.latitudeDelta / 2;
  const bot = region.latitude - region.latitudeDelta / 2;
  const right = region.longitude + region.logitudeDelta / 2;
  const left = region.longitude - region.logitudeDelta / 2;

  return (
    coordinate.latitude <= top &&
    coordinate.latitude >= bottom &&
    coordinate.longitude <= right &&
    coordinate.longitude >= left
  );
}

export default function MapScreen() {
  const markerRef = useRef();
  const {colors} = useTheme();

  const userLocationCoordinates = useRef(
    new AnimatedRegion({
      latitude: 17.385,
      longitude: 78.4867,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
  );
  const [state, setState] = useState({
    curLoc: {
      latitude: 17.385,
      longitude: 78.4867,
    },
    destinationCords: {
      latitude: 18.5204,
      longitude: 73.8567,
    },
    isLoading: false,
    // coordinate: new AnimatedRegion({
    //   latitude: 17.385,
    //   longitude: 78.4867,
    //   latitudeDelta: LATITUDE_DELTA,
    //   longitudeDelta: LONGITUDE_DELTA,
    // }),
  });

  const {curLoc, destinationCords, isLoading, coordinate} = state;

  const getLiveLocation = async () => {
    const locPermission = await locationPermission();
    console.log('loaction Permisssom', locPermission);
    if (locPermission) {
      // const res = await getCurrentLocation();
      // console.log('res....', res);
      const {latitude, longitude} = await getCurrentLocation();
      console.log('get live location after 4 second', latitude, longitude);
      animate(latitude, longitude);
      setState(prev => ({
        ...prev,
        curLoc: {latitude, longitude},
        // coordinate: new AnimatedRegion({
        //   latitude: latitude,
        //   longitude: longitude,
        //   latitudeDelta: LATITUDE_DELTA,
        //   longitudeDelta: LONGITUDE_DELTA,
        // }),
      }));
    }
  };

  const animateToLiveLocation = async () => {
    const locPermission = await locationPermission();
    console.log('animateLiveLocation', locPermission);
    if (locPermission) {
      // const res = await getCurrentLocation();
      // console.log('res....', res);
      const {latitude, longitude} = await getCurrentLocation();
      console.log(
        'get live location after 4 second & animateLive Location',
        latitude,
        longitude,
      );
      animate(latitude, longitude);
      setState(prev => ({
        ...prev,
        curLoc: {latitude, longitude},
        // coordinate: new AnimatedRegion({
        //   latitude: latitude,
        //   longitude: longitude,
        //   latitudeDelta: LATITUDE_DELTA,
        //   longitudeDelta: LONGITUDE_DELTA,
        // }),
      }));
    }
  };

  useEffect(() => {
    getLiveLocation();
    const interval = setInterval(() => {
      animateToLiveLocation();
    }, 6000);
    return () => clearInterval(interval);
  }, []);

  const animate = (latitude, longitude) => {
    const newCoordinate = {latitude, longitude};
    if (Platform.OS == 'android') {
      if (markerRef.current) {
        markerRef.current.animateMarkerToCoordinate(newCoordinate, 7000);
      }
    } else {
      userLocationCoordinates.current.timing(newCoordinate).start();
    }
    mapRef.current.fitToCoordinates([newCoordinate], {
      // edgePadding: {top: 50, right: 50, bottom: 400, left: 50},
    });
  };

  const onCenter = () => {
    mapRef.current.animateToRegion({
      latitude: curLoc.latitude,
      longitude: curLoc.longitude,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    });
  };

  const renderInner = () => (
    <View style={styles.panel}>
      <View
        style={{
          flexDirection: 'row',
          paddingRight: 20,
          alignItems: 'center',
        }}>
        <Image
          style={{height: 40, width: 40}}
          // source={{
          //   uri:
          //     'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PHBhdGggZD0ibTUyIDMzaDR2NGgtNHoiIGZpbGw9IiNlN2U0ZGQiLz48cGF0aCBkPSJtMzAgMzNoNHY0aC00eiIgZmlsbD0iI2U3ZTRkZCIvPjxwYXRoIGQ9Im0yNiAxN2gzNHYxM2gtMzR6IiBmaWxsPSIjZjdkODgxIi8+PHBhdGggZD0ibTI2IDE3aDM0djNoLTM0eiIgZmlsbD0iIzdmNzg2YiIvPjxnPjxwYXRoIGQ9Im0yMSA0Nmg3djJoLTd6IiBmaWxsPSIjZTdlNGRkIi8+PC9nPjxnPjxwYXRoIGQ9Im0zMCA0Nmg2djJoLTZ6IiBmaWxsPSIjZTdlNGRkIi8+PC9nPjxwYXRoIGQ9Im0yOSA0OWMtMS4xMDUgMC0yLS44OTUtMi0ydi0yaDR2MmMwIDEuMTA1LS44OTUgMi0yIDJ6IiBmaWxsPSIjZjJjMzUxIi8+PHBhdGggZD0ibTQ4IDQ5IDEwLjAxOS0uMDFjMS4wOTctLjAxIDEuOTgxLS45MDMgMS45ODEtMnYtNS45OWgtNTB2NGgzNXYxLjk3MmgzeiIgZmlsbD0iIzllOTY4ZCIvPjxwYXRoIGQ9Im00IDM0LjAyOHYtMy43ODVjMC0uNzk2LjMxNi0xLjU1OS44NzktMi4xMjFsNi4yNDMtNi4yNDNjLjU2Mi0uNTYzIDEuMzI1LS44NzkgMi4xMjEtLjg3OWg2Ljc1N2MuNTUyIDAgMSAuNDQ4IDEgMXYxOWgtMTd2LTIuOTcyIiBmaWxsPSIjZjJjMzUxIi8+PHBhdGggZD0ibTE0IDQwLjk5OWMwLTIuMjA5IDEuNzkxLTQgNC00di0zaC0xNHY2Ljk3MmgxMHoiIGZpbGw9IiNmN2Q4ODEiLz48cGF0aCBkPSJtNCAzNC4wMjggMTQtLjAyOHYtMTBoLTlsLTQuMTIxIDQuMTIxYy0uNTYzLjU2My0uODc5IDEuMzI2LS44NzkgMi4xMjJ6IiBmaWxsPSIjYzdlMmZjIi8+PHBhdGggZD0ibTI5IDE3YzAtMS4zMTEuODQ2LTIuNDE0IDIuMDE4LTIuODIyLS4wMDQtLjA2LS4wMTgtLjExNy0uMDE4LS4xNzggMC0xLjY1NyAxLjM0My0zIDMtMyAuNTM3IDAgMS4wMzQuMTUzIDEuNDcuNC41MzItLjgzOSAxLjQ2My0xLjQgMi41My0xLjQuNzcyIDAgMS40NjguMyAyIC43NzkuNTMyLS40NzkgMS4yMjgtLjc3OSAyLS43NzkuNTQ5IDAgMS4wNTcuMTU4IDEuNS40MTYuNDQzLS4yNTguOTUxLS40MTYgMS41LS40MTZzMS4wNTcuMTU4IDEuNS40MTZjLjQ0My0uMjU4Ljk1MS0uNDE2IDEuNS0uNDE2IDEuMDY3IDAgMS45OTguNTYxIDIuNTMgMS40LjQzNi0uMjQ3LjkzMy0uNCAxLjQ3LS40IDEuNjU3IDAgMyAxLjM0MyAzIDMgMCAuMDYxLS4wMTQuMTE4LS4wMTguMTc4IDEuMTcyLjQwOCAyLjAxOCAxLjUxMSAyLjAxOCAyLjgyMnoiIGZpbGw9IiM5NzY5NDciLz48cGF0aCBkPSJtNiAzOC4wMjhoLTJjLTEuMTA1IDAtMi0uODk1LTItMiAwLTEuMTA1Ljg5NS0yIDItMmgyeiIgZmlsbD0iI2U3ZTRkZCIvPjxwYXRoIGQ9Im0xMCA0Ny4wMjhoLTNjLTEuNjU3IDAtMy0xLjM0My0zLTN2LTNoNnoiIGZpbGw9IiM3Zjc4NmIiLz48cGF0aCBkPSJtMjEgMzdoNDF2NGgtNDF6IiBmaWxsPSIjZjdkODgxIi8+PGcgZmlsbD0iIzUzNGY0NCI+PGNpcmNsZSBjeD0iMTgiIGN5PSI0OS4wMjgiIHI9IjUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjQ5LjAyOCIgcj0iNSIvPjxjaXJjbGUgY3g9IjUyIiBjeT0iNDkuMDI4IiByPSI1Ii8+PC9nPjxnPjxwYXRoIGQ9Im0xOCA1MS4wMjdjLTEuMTAzIDAtMi0uODk3LTItMnMuODk3LTIgMi0yIDIgLjg5NyAyIDItLjg5NyAyLTIgMnoiIGZpbGw9IiNjYmMzYjYiLz48L2c+PGc+PHBhdGggZD0ibTM5IDUxLjAyN2MtMS4xMDMgMC0yLS44OTctMi0ycy44OTctMiAyLTIgMiAuODk3IDIgMi0uODk3IDItMiAyeiIgZmlsbD0iI2NiYzNiNiIvPjwvZz48Zz48cGF0aCBkPSJtNTIgNTEuMDI3Yy0xLjEwMyAwLTItLjg5Ny0yLTJzLjg5Ny0yIDItMiAyIC44OTcgMiAyLS44OTcgMi0yIDJ6IiBmaWxsPSIjY2JjM2I2Ii8+PC9nPjxnPjxwYXRoIGQ9Im05IDM2LjAyOGg0djJoLTR6IiBmaWxsPSIjOWU5NjhkIi8+PC9nPjxwYXRoIGQ9Im00IDQ0LjAyOGMwIC4zNDIuMDY5LjY2NS4xNzUuOTcxaDUuODI0di0yaC01Ljk5OXoiIGZpbGw9IiM1MzRmNDQiLz48cGF0aCBkPSJtNjIgMzNoLTM2bC0zLTE1aC03LjVjLS44MjggMC0xLjUtLjY3Mi0xLjUtMS41IDAtLjgyOC42NzItMS41IDEuNS0xLjVoOC44NGMuOTYyIDAgMS43ODguNjg1IDEuOTY2IDEuNjMxbDIuNjk0IDEzLjM2OWgzM3oiIGZpbGw9IiNmMmMzNTEiLz48Zz48cGF0aCBkPSJtNTUgMjBoMnYxMGgtMnoiIGZpbGw9IiNmMmMzNTEiLz48L2c+PGc+PHBhdGggZD0ibTUxIDIwaDJ2MTBoLTJ6IiBmaWxsPSIjZjJjMzUxIi8+PC9nPjxnPjxwYXRoIGQ9Im00NyAyMGgydjEwaC0yeiIgZmlsbD0iI2YyYzM1MSIvPjwvZz48Zz48cGF0aCBkPSJtNDMgMjBoMnYxMGgtMnoiIGZpbGw9IiNmMmMzNTEiLz48L2c+PGc+PHBhdGggZD0ibTM5IDIwaDJ2MTBoLTJ6IiBmaWxsPSIjZjJjMzUxIi8+PC9nPjxnPjxwYXRoIGQ9Im0zNSAyMGgydjEwaC0yeiIgZmlsbD0iI2YyYzM1MSIvPjwvZz48Zz48cGF0aCBkPSJtMzEgMjBoMnYxMGgtMnoiIGZpbGw9IiNmMmMzNTEiLz48L2c+PHBhdGggZD0ibTQuODc5IDI4LjEyMWMtLjU2My41NjMtLjg3OSAxLjMyNi0uODc5IDIuMTIydjMuNzg1bDYuNjItLjAxM2MyLjM4MS0yLjIxNiAzLjg4LTUuMzY4IDMuODgtOC44NzcgMC0uMzg0LS4wMjMtLjc2Mi0uMDU3LTEuMTM3aC01LjQ0M3oiIGZpbGw9IiNlYmY3ZmUiLz48cGF0aCBkPSJtNDUuMDMxIDEwLjAwMmMtLjAxMSAwLS4wMjEtLjAwMi0uMDMxLS4wMDItLjU0OSAwLTEuMDU3LjE1OC0xLjUuNDE2LS40NDMtLjI1OC0uOTUxLS40MTYtMS41LS40MTYtLjc3MiAwLTEuNDY4LjMtMiAuNzc5LS41MzItLjQ3OS0xLjIyOC0uNzc5LTItLjc3OS0xLjA2NyAwLTEuOTk4LjU2MS0yLjUzIDEuNC0uNDM2LS4yNDctLjkzMy0uNC0xLjQ3LS40LTEuNjU3IDAtMyAxLjM0My0zIDMgMCAuMDYxLjAxNC4xMTguMDE4LjE3OC0xLjE3Mi40MDgtMi4wMTggMS41MTEtMi4wMTggMi44MjJoMTAuODkyYzIuMzE3LTEuNzg1IDQuMTEzLTQuMjAyIDUuMTM5LTYuOTk4eiIgZmlsbD0iI2MxOGU1OSIvPjwvZz48L3N2Zz4=',
          // }}
          source={require('./../../assets/dump-truck.png')}
        />
        <Text style={{fontSize: 15, color: 'black', marginLeft: 10}}>
          City Tower, Mumbai Hwy, Judges Colony, New Malakpet, Hyderabad,
        </Text>
      </View>
      <View
        style={{
          flexDirection: 'row',
          paddingRight: 20,
          alignItems: 'center',
        }}>
        <Image
          style={{height: 40, width: 40}}
          // source={{
          //   uri:
          //     'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PHBhdGggZD0ibTUyIDMzaDR2NGgtNHoiIGZpbGw9IiNlN2U0ZGQiLz48cGF0aCBkPSJtMzAgMzNoNHY0aC00eiIgZmlsbD0iI2U3ZTRkZCIvPjxwYXRoIGQ9Im0yNiAxN2gzNHYxM2gtMzR6IiBmaWxsPSIjZjdkODgxIi8+PHBhdGggZD0ibTI2IDE3aDM0djNoLTM0eiIgZmlsbD0iIzdmNzg2YiIvPjxnPjxwYXRoIGQ9Im0yMSA0Nmg3djJoLTd6IiBmaWxsPSIjZTdlNGRkIi8+PC9nPjxnPjxwYXRoIGQ9Im0zMCA0Nmg2djJoLTZ6IiBmaWxsPSIjZTdlNGRkIi8+PC9nPjxwYXRoIGQ9Im0yOSA0OWMtMS4xMDUgMC0yLS44OTUtMi0ydi0yaDR2MmMwIDEuMTA1LS44OTUgMi0yIDJ6IiBmaWxsPSIjZjJjMzUxIi8+PHBhdGggZD0ibTQ4IDQ5IDEwLjAxOS0uMDFjMS4wOTctLjAxIDEuOTgxLS45MDMgMS45ODEtMnYtNS45OWgtNTB2NGgzNXYxLjk3MmgzeiIgZmlsbD0iIzllOTY4ZCIvPjxwYXRoIGQ9Im00IDM0LjAyOHYtMy43ODVjMC0uNzk2LjMxNi0xLjU1OS44NzktMi4xMjFsNi4yNDMtNi4yNDNjLjU2Mi0uNTYzIDEuMzI1LS44NzkgMi4xMjEtLjg3OWg2Ljc1N2MuNTUyIDAgMSAuNDQ4IDEgMXYxOWgtMTd2LTIuOTcyIiBmaWxsPSIjZjJjMzUxIi8+PHBhdGggZD0ibTE0IDQwLjk5OWMwLTIuMjA5IDEuNzkxLTQgNC00di0zaC0xNHY2Ljk3MmgxMHoiIGZpbGw9IiNmN2Q4ODEiLz48cGF0aCBkPSJtNCAzNC4wMjggMTQtLjAyOHYtMTBoLTlsLTQuMTIxIDQuMTIxYy0uNTYzLjU2My0uODc5IDEuMzI2LS44NzkgMi4xMjJ6IiBmaWxsPSIjYzdlMmZjIi8+PHBhdGggZD0ibTI5IDE3YzAtMS4zMTEuODQ2LTIuNDE0IDIuMDE4LTIuODIyLS4wMDQtLjA2LS4wMTgtLjExNy0uMDE4LS4xNzggMC0xLjY1NyAxLjM0My0zIDMtMyAuNTM3IDAgMS4wMzQuMTUzIDEuNDcuNC41MzItLjgzOSAxLjQ2My0xLjQgMi41My0xLjQuNzcyIDAgMS40NjguMyAyIC43NzkuNTMyLS40NzkgMS4yMjgtLjc3OSAyLS43NzkuNTQ5IDAgMS4wNTcuMTU4IDEuNS40MTYuNDQzLS4yNTguOTUxLS40MTYgMS41LS40MTZzMS4wNTcuMTU4IDEuNS40MTZjLjQ0My0uMjU4Ljk1MS0uNDE2IDEuNS0uNDE2IDEuMDY3IDAgMS45OTguNTYxIDIuNTMgMS40LjQzNi0uMjQ3LjkzMy0uNCAxLjQ3LS40IDEuNjU3IDAgMyAxLjM0MyAzIDMgMCAuMDYxLS4wMTQuMTE4LS4wMTguMTc4IDEuMTcyLjQwOCAyLjAxOCAxLjUxMSAyLjAxOCAyLjgyMnoiIGZpbGw9IiM5NzY5NDciLz48cGF0aCBkPSJtNiAzOC4wMjhoLTJjLTEuMTA1IDAtMi0uODk1LTItMiAwLTEuMTA1Ljg5NS0yIDItMmgyeiIgZmlsbD0iI2U3ZTRkZCIvPjxwYXRoIGQ9Im0xMCA0Ny4wMjhoLTNjLTEuNjU3IDAtMy0xLjM0My0zLTN2LTNoNnoiIGZpbGw9IiM3Zjc4NmIiLz48cGF0aCBkPSJtMjEgMzdoNDF2NGgtNDF6IiBmaWxsPSIjZjdkODgxIi8+PGcgZmlsbD0iIzUzNGY0NCI+PGNpcmNsZSBjeD0iMTgiIGN5PSI0OS4wMjgiIHI9IjUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjQ5LjAyOCIgcj0iNSIvPjxjaXJjbGUgY3g9IjUyIiBjeT0iNDkuMDI4IiByPSI1Ii8+PC9nPjxnPjxwYXRoIGQ9Im0xOCA1MS4wMjdjLTEuMTAzIDAtMi0uODk3LTItMnMuODk3LTIgMi0yIDIgLjg5NyAyIDItLjg5NyAyLTIgMnoiIGZpbGw9IiNjYmMzYjYiLz48L2c+PGc+PHBhdGggZD0ibTM5IDUxLjAyN2MtMS4xMDMgMC0yLS44OTctMi0ycy44OTctMiAyLTIgMiAuODk3IDIgMi0uODk3IDItMiAyeiIgZmlsbD0iI2NiYzNiNiIvPjwvZz48Zz48cGF0aCBkPSJtNTIgNTEuMDI3Yy0xLjEwMyAwLTItLjg5Ny0yLTJzLjg5Ny0yIDItMiAyIC44OTcgMiAyLS44OTcgMi0yIDJ6IiBmaWxsPSIjY2JjM2I2Ii8+PC9nPjxnPjxwYXRoIGQ9Im05IDM2LjAyOGg0djJoLTR6IiBmaWxsPSIjOWU5NjhkIi8+PC9nPjxwYXRoIGQ9Im00IDQ0LjAyOGMwIC4zNDIuMDY5LjY2NS4xNzUuOTcxaDUuODI0di0yaC01Ljk5OXoiIGZpbGw9IiM1MzRmNDQiLz48cGF0aCBkPSJtNjIgMzNoLTM2bC0zLTE1aC03LjVjLS44MjggMC0xLjUtLjY3Mi0xLjUtMS41IDAtLjgyOC42NzItMS41IDEuNS0xLjVoOC44NGMuOTYyIDAgMS43ODguNjg1IDEuOTY2IDEuNjMxbDIuNjk0IDEzLjM2OWgzM3oiIGZpbGw9IiNmMmMzNTEiLz48Zz48cGF0aCBkPSJtNTUgMjBoMnYxMGgtMnoiIGZpbGw9IiNmMmMzNTEiLz48L2c+PGc+PHBhdGggZD0ibTUxIDIwaDJ2MTBoLTJ6IiBmaWxsPSIjZjJjMzUxIi8+PC9nPjxnPjxwYXRoIGQ9Im00NyAyMGgydjEwaC0yeiIgZmlsbD0iI2YyYzM1MSIvPjwvZz48Zz48cGF0aCBkPSJtNDMgMjBoMnYxMGgtMnoiIGZpbGw9IiNmMmMzNTEiLz48L2c+PGc+PHBhdGggZD0ibTM5IDIwaDJ2MTBoLTJ6IiBmaWxsPSIjZjJjMzUxIi8+PC9nPjxnPjxwYXRoIGQ9Im0zNSAyMGgydjEwaC0yeiIgZmlsbD0iI2YyYzM1MSIvPjwvZz48Zz48cGF0aCBkPSJtMzEgMjBoMnYxMGgtMnoiIGZpbGw9IiNmMmMzNTEiLz48L2c+PHBhdGggZD0ibTQuODc5IDI4LjEyMWMtLjU2My41NjMtLjg3OSAxLjMyNi0uODc5IDIuMTIydjMuNzg1bDYuNjItLjAxM2MyLjM4MS0yLjIxNiAzLjg4LTUuMzY4IDMuODgtOC44NzcgMC0uMzg0LS4wMjMtLjc2Mi0uMDU3LTEuMTM3aC01LjQ0M3oiIGZpbGw9IiNlYmY3ZmUiLz48cGF0aCBkPSJtNDUuMDMxIDEwLjAwMmMtLjAxMSAwLS4wMjEtLjAwMi0uMDMxLS4wMDItLjU0OSAwLTEuMDU3LjE1OC0xLjUuNDE2LS40NDMtLjI1OC0uOTUxLS40MTYtMS41LS40MTYtLjc3MiAwLTEuNDY4LjMtMiAuNzc5LS41MzItLjQ3OS0xLjIyOC0uNzc5LTItLjc3OS0xLjA2NyAwLTEuOTk4LjU2MS0yLjUzIDEuNC0uNDM2LS4yNDctLjkzMy0uNC0xLjQ3LS40LTEuNjU3IDAtMyAxLjM0My0zIDMgMCAuMDYxLjAxNC4xMTguMDE4LjE3OC0xLjE3Mi40MDgtMi4wMTggMS41MTEtMi4wMTggMi44MjJoMTAuODkyYzIuMzE3LTEuNzg1IDQuMTEzLTQuMjAyIDUuMTM5LTYuOTk4eiIgZmlsbD0iI2MxOGU1OSIvPjwvZz48L3N2Zz4=',
          // }}
          source={require('./../../assets/tipper.png')}
        />
        <Text style={{fontSize: 15, color: 'black', marginLeft: 10}}>
          Shivaji Marg, Vinayaka Hills, Vignanapuri Teachers Colony, B N Reddy
          Nagar, Hyderabad
        </Text>
      </View>
      <View style={{flexDirection: 'row', margin: 5}}>
        {/* <Icon name="dot-single" style={{color: 'red'}} size={35} /> */}

        <Text style={{fontSize: 15, color: 'black'}}>Commodity : </Text>
        <Text style={{fontWeight: 'bold'}}> Black Dirt</Text>
      </View>
      <TouchableOpacity
        style={styles.panelButton}
        onPress={() => bs.current.snapTo(1)}>
        <Text style={styles.panelButtonTitle}>Start</Text>
      </TouchableOpacity>
    </View>
  );

  const renderHeader = () => (
    <View style={styles.header}>
      <View style={styles.panelHeader}>
        <View style={styles.panelHandle} />
      </View>
    </View>
  );
  const iosSnapPoints = [590, 430];
  const bs = React.createRef();
  const fall = new Animated.Value(1);
  const mapRef = React.useRef();
  return (
    <View style={styles.container}>
      <AnimatedMap
        // provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        onRegionChange={console.log}
        ref={mapRef}
        style={styles.map}
        initialRegion={{
          ...curLoc,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA,
        }}>
        {/* {Object.keys(curLoc).length > 0 && ( */}
        <Marker.Animated
          ref={markerRef}
          coordinate={userLocationCoordinates.current}
          image={mapIcons.currentLocation}
        />
        {/* )} */}

        {Object.keys(destinationCords).length > 0 && (
          <Marker coordinate={destinationCords} image={mapIcons.destination} />
        )}

        {Object.keys(destinationCords).length > 0 && (
          <MapViewDirections
            origin={curLoc}
            destination={destinationCords}
            apikey={GOOGLE_MAPS_APIKEY}
            strokeWidth={3}
            strokeColor="#223664"
            optimizeWaypoints={true}
            onStart={params => {
              console.log(
                `Started routing between "${params.origin}" and "${params.destination}"`,
              );
            }}
            onReady={result => {
              console.log(`Distance: ${result.distance} km`);
              console.log(`Duration: ${result.duration} min.`);
              mapRef.current.fitToCoordinates(result.coordinates, {
                edgePadding: {
                  // right: 50,
                  // left: 50,
                  // bottom: 300,
                  // top: 100,
                },
              });
            }}
          />
        )}
      </AnimatedMap>
      <TouchableOpacity
        style={{
          position: 'absolute',
          // bottom: 0,
          // right: 0,
          left: 0,
          top: 0,
        }}
        onPress={onCenter}>
        <Image source={mapIcons.greenIndicator} />
      </TouchableOpacity>
      <BottomSheet
        ref={bs}
        snapPoints={Platform.OS === 'android' ? [500, 400] : iosSnapPoints}
        renderContent={renderInner}
        renderHeader={renderHeader}
        initialSnap={0}
        callbackNode={fall}
        enabledGestureInteraction={true}
        enabledHeaderGestureInteraction={true}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  panel: {
    padding: 20,
    backgroundColor: '#FFFFFF',
    paddingTop: -20,
    // borderTopLeftRadius: 20,
    // borderTopRightRadius: 20,
    // shadowColor: '#000000',
    // shadowOffset: {width: 0, height: 0},
    // shadowRadius: 5,
    // shadowOpacity: 0.4,
    // flex: 1,
    // marginLeft: -400,
  },

  container: {
    ...StyleSheet.absoluteFillObject,
    height: height,
    width: width,
    justifyContent: 'flex-end',
    alignItems: 'center',
    flex: 1,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },

  panelButton: {
    padding: 13,
    borderRadius: 10,
    backgroundColor: '#223664',
    alignItems: 'center',
    marginVertical: 7,
  },
  panelButtonTitle: {
    fontSize: 17,
    fontWeight: 'bold',
    color: 'white',
  },
  header: {
    backgroundColor: '#FFFFFF',
    shadowColor: '#333333',
    shadowOffset: {width: -1, height: -3},
    shadowRadius: 2,
    shadowOpacity: 0.4,
    // elevation: 5,
    paddingTop: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  panelHeader: {
    alignItems: 'center',
  },
  panelHandle: {
    width: 40,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#00000040',
    marginBottom: 10,
  },
});