BaaS_Driver_Android_App/app/(tabs)/index.tsx

import {
  Pressable,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { useTranslation } from "react-i18next";
import SemiCircleProgress from "../../components/home/SemiCircleProgress";
import { Text, View } from "@/components/Themed";
import { useNavigation } from "expo-router";
import { useLayoutEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import Profile from "../../components/home/Profile";
import CustomerCareIcon from "../../assets/icons/customer-care.svg";
import ServiceReminderCard from "@/components/home/ServiceReminderCard";
import MetricCard from "@/components/home/MetricCard";
import PaymentDueCard from "@/components/home/PaymentDueCard";
import MapView, { Marker } from "react-native-maps";
import BatteryWarrantyCard from "@/components/home/BatteryWarrantyCars";
import CustomerSupportModal from "@/components/home/CustomerSupportModal";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import LocationOff from "@/assets/icons/location_off.svg";
import { Linking } from "react-native";

export default function HomeScreen() {
  const { t } = useTranslation();
  const navigation = useNavigation();
  const [isSupportModalVisible, setIsSupportModalVisible] = useState(false);
  const { SoC, SoH, chargingState, lat, lon, loading, error } = useSelector(
    (state: RootState) => state.telemetry
  );

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () => (
        <View style={styles.headerTitleContainer}>
          <Text style={styles.title}>Yatri - NBX 600</Text>
          <Text style={styles.subtitle}>DL253C3602</Text>
        </View>
      ),
      headerRight: () => (
        <View style={styles.rightContainer}>
          <Pressable
            style={styles.iconContainer}
            onPress={() => setIsSupportModalVisible(true)}
          >
            <CustomerCareIcon />
          </Pressable>
          <Profile username="Vishal" textSize={16} boxSize={32} />
        </View>
      ),
    });
  }, [navigation]);

  const openInGoogleMaps = () => {
    const url = `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`;
    Linking.openURL(url).catch((err) =>
      console.error("Failed to open Google Maps:", err)
    );
  };

  return (
    <View style={{ flex: 1, backgroundColor: "#F3F5F8" }}>
      <StatusBar style="dark" />
      <ScrollView contentContainerStyle={styles.container} style={{ flex: 1 }}>
        <ServiceReminderCard
          type="info"
          message="Service will be due in 3 days"
          subMessage="Service Reminder"
        />
        <View style={styles.iconContainer}>
          <SemiCircleProgress progress={SoC} status={chargingState} />
        </View>
        <View style={styles.metrics}>
          <MetricCard heading={t("home.battery-health")} value={SoH} unit="%" />
          <MetricCard
            heading={t("home.total-distance")}
            value={20009}
            unit="km"
          />
        </View>
        <PaymentDueCard
          label="Payment Due"
          amount="$2,000"
          onPress={() => {
            alert("le is number pe bhej de 8685846459");
          }}
        />
        <View style={styles.map}>
          {loading ? (
            <View style={styles.errorContainer}>
              <LocationOff />
              <Text style={styles.errorText}>Fetching Location...</Text>
            </View>
          ) : lat && lon ? (
            <>
              <View style={styles.mapContainer}>
                <MapView
                  style={styles.mapStyle}
                  initialRegion={{
                    latitude: 28.54,
                    longitude: 77.32,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                  }}
                  // customMapStyle={mapStyle}
                >
                  <Marker
                    draggable
                    coordinate={{
                      latitude: lat,
                      longitude: lon,
                    }}
                    anchor={{ x: 0.5, y: 0.5 }}
                    onDragEnd={(e) =>
                      alert(JSON.stringify(e.nativeEvent.coordinate))
                    }
                    title={"Test Marker"}
                    description={"This is a description of the marker"}
                    image={require("../../assets/icons/marker.png")}
                  />
                </MapView>
              </View>
              <TouchableOpacity>
                <Text
                  style={styles.viewLocationText}
                  onPress={openInGoogleMaps}
                >
                  View Vehicle Location
                </Text>
              </TouchableOpacity>
            </>
          ) : (
            <View style={styles.errorContainer}>
              <LocationOff />
              <Text style={styles.errorText}>Error fetching location</Text>
            </View>
          )}
        </View>

        <BatteryWarrantyCard
          totalWarrantyYears={8}
          batteryPurchaseEpoch={Math.floor(
            new Date("2023-06-30").getTime() / 1000
          )}
        />
      </ScrollView>
      <CustomerSupportModal
        visible={isSupportModalVisible}
        onClose={() => setIsSupportModalVisible(false)}
      />
    </View>
  );
}

const mapStyle = [
  { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
  { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
  { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
  {
    featureType: "administrative.locality",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "poi",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "poi.park",
    elementType: "geometry",
    stylers: [{ color: "#263c3f" }],
  },
  {
    featureType: "poi.park",
    elementType: "labels.text.fill",
    stylers: [{ color: "#6b9a76" }],
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#38414e" }],
  },
  {
    featureType: "road",
    elementType: "geometry.stroke",
    stylers: [{ color: "#212a37" }],
  },
  {
    featureType: "road",
    elementType: "labels.text.fill",
    stylers: [{ color: "#9ca5b3" }],
  },
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [{ color: "#746855" }],
  },
  {
    featureType: "road.highway",
    elementType: "geometry.stroke",
    stylers: [{ color: "#1f2835" }],
  },
  {
    featureType: "road.highway",
    elementType: "labels.text.fill",
    stylers: [{ color: "#f3d19c" }],
  },
  {
    featureType: "transit",
    elementType: "geometry",
    stylers: [{ color: "#2f3948" }],
  },
  {
    featureType: "transit.station",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ color: "#17263c" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.fill",
    stylers: [{ color: "#515c6d" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.stroke",
    stylers: [{ color: "#17263c" }],
  },
];

const styles = StyleSheet.create({
  errorText: {
    color: "#565F70",
    fontWeight: "400",
    fontSize: 16,
    textAlign: "center",
  },
  errorContainer: {
    height: 255,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FCFCFC",
    gap: 8,
  },
  viewLocationText: {
    color: "#388E3C",
    fontWeight: "600",
    fontSize: 16,
    textAlign: "center",
    marginTop: 8,
  },
  map: {
    padding: 12,
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: "#fff",
  },
  mapContainer: {
    height: 255,
  },
  mapStyle: {
    width: "100%",
    height: "100%",
    borderRadius: 10,
  },
  metrics: {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "#F3F5F8",
  },
  container: {
    padding: 16,
    gap: 16,
    paddingBottom: 110,
  },
  iconContainer: {
    backgroundColor: "#fff",
  },
  headerTitleContainer: {
    flexDirection: "column",
    backgroundColor: "#fff",
  },
  title: {
    fontSize: 14,
    color: "#6B7280",
    fontWeight: "500",
  },
  subtitle: {
    fontSize: 18,
    color: "#111827",
    fontWeight: "700",
  },
  rightContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingRight: 16,
    gap: 8,
    backgroundColor: "#fff",
  },
  badge: {
    backgroundColor: "#FEE2E2",
    borderRadius: 20,
    width: 30,
    height: 30,
    justifyContent: "center",
    alignItems: "center",
  },
  badgeText: {
    color: "#DC2626",
    fontWeight: "700",
  },
});