Untitled

import { StatusBar } from "expo-status-bar";
import React, { useEffect, useState, useRef } from "react";
import { StyleSheet, Text, View, Image, Alert } from "react-native";
import Login from "./components/Login";
import Register from "./components/Register/Register";
import Home from "./components/Home";
import Settings from "./components/Settings";
import Orders from "./components/Orders";
import Inventory from "./components/Inventory/Inventory";
import Prescription from "./components/Prescription";
import CatergoryDetail from "./components/Inventory/CatergoryDetail";
import * as Notifications from "expo-notifications";
import { useFonts } from "expo-font";
import {
  NavigationContainer,
  useNavigationContainerRef,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import * as TaskManager from "expo-task-manager";
import { AntDesign } from "@expo/vector-icons";
import Otp from "./components/Otp";
import StepOne from "./components/Register/StepOne";
import StepTwo from "./components/Register/StepTwo";
import StepThree from "./components/Register/StepThree";
import StepFour from "./components/Register/StepFour";
import Toast from "react-native-toast-message";
import BankDetails from "./components/BankDetails";
import Wallet from "./components/Wallet";
import Contact from "./components/ContactUs";
import WaitingScreen from "./components/WaitingScreen";
import OrderRecieved from "./components/Orders/OrderRecieved";

//context
import ContextProvider, { Context } from "./context/Context";
import Map from "./components/smaillComponets/Map";
import { playSound, stopSound } from "./utills";
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const BACKGROUND_NOTIFICATION_TASK = "BACKGROUND-NOTIFICATION-TASK";
TaskManager.defineTask(BACKGROUND_NOTIFICATION_TASK, ({ data, error }) => {
  if (error) {
    console.error(error);
    return;
  }

  if (data?.notification?.channelId === "CUSTOM") {
    playSound();
  }
  // console.log("Received a notification in the background!", data);
});
Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

export default function App() {
  const navigationRef = useNavigationContainerRef();
  const notiResponseListener = React.createRef();

  const routeNameRef = useRef();
  const [LoginStatus, setLoginStatus] = useState(false);
  const [loaded] = useFonts({
    "Manrope-Regular": require("./assets/fonts/Manrope-Regular.ttf"),
    "Manrope-Bold": require("./assets/fonts/Manrope-Bold.ttf"),
    "Manrope-SemiBold": require("./assets/fonts/Manrope-SemiBold.ttf"),
  });

  useEffect(() => {
    Notifications.getLastNotificationResponseAsync().then((response) => {
      const dataString = response?.notification?.request?.content?.dataString;
      let parsedData = {};
      if (dataString) {
        try {
          parsedData = JSON.parse(dataString);
          // if (parsedData) {
          //   navigationRef.current?.navigate("OrderRecieved", parsedData);
          // }
        } catch (error) {
          console.error("Failed to parse dataString:", error);
        }
      }
    });

    const backgroundSubscription =
      Notifications.addNotificationReceivedListener((response) => {
        console.log("Received a notification in the background!", response);
        // navigationRef.current?.navigate(
        //   "OrderRecieved",
        //   response.request.content.data
        // );
      });

    return () => backgroundSubscription.remove();
  }, []);
  useEffect(() => {
    const notiResponseListener =
      Notifications.addNotificationResponseReceivedListener((response) => {
        // Stop the sound when notification is clicked
        stopSound();

        // Optionally check for specific channel ID
        if (response?.notification?.request?.content?.channelId === "CUSTOM") {
          stopSound(); // Stop the sound for CUSTOM channel notifications
        }

        // Handle other tasks (e.g., navigation)
        console.log("Notification clicked:", response);
      });

    return () => notiResponseListener.remove();
  }, []);



  function Bootom({ route }) {
    console.log(route.params);
    return (
      <Tab.Navigator
        initialRouteName="Orders"
        screenOptions={{
          tabBarActiveTintColor: "#004D4D",
          headerShown: false,
          tabBarStyle: {
            backgroundColor: "#fff",
            borderTopColor: "transparent",
            elevation: 0,
            borderTopEndRadius: 10,
            borderTopStartRadius: 10,
          },
        }}
      >
        <Tab.Screen
          name="Orders"
          component={Orders}
          options={{
            tabBarIcon: ({ color, size }) => (
              <AntDesign name="shoppingcart" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Dashboard"
          component={Home}
          options={{
            tabBarIcon: ({ color, size }) => (
              <AntDesign name="barschart" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Inventory"
          component={Inventory}
          options={{
            tabBarIcon: ({ color, size }) => (
              <AntDesign name="database" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Settings"
          component={Settings}
          options={{
            tabBarIcon: ({ color, size }) => (
              <AntDesign name="setting" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    );
  }

  console.log(LoginStatus, "Ddddddddddddddddd");

  return (
    <ContextProvider>
      <NavigationContainer
        ref={navigationRef}
        onReady={() => {
          routeNameRef.current = navigationRef.getCurrentRoute().name;
        }}
        onStateChange={async () => {
          const previousRouteName = routeNameRef.current;
          const currentRouteName = navigationRef.getCurrentRoute().name;
          const trackScreenView = (name) => {
            if (name == "Orders") {
              setLoginStatus(true);
            }
          };
          if (previousRouteName !== currentRouteName) {
            routeNameRef.current = currentRouteName;
            await trackScreenView(currentRouteName);
          }
        }}
      >
        <Stack.Navigator>
          <Stack.Screen
            name="Login"
            component={Login}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="OrderRecieved"
            component={OrderRecieved}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="Register"
            component={Register}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerTintColor: "#fff",
              headerTitle: "MEDSTOWN",
            }}
          />
          <Stack.Screen
            name="StepOne"
            component={StepOne}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#fff",
              headerTitle: "",
            }}
          />
          <Stack.Screen
            name="StepTwo"
            component={StepTwo}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#fff",
              headerTitle: "",
            }}
          />
          <Stack.Screen
            name="BankDetails"
            component={BankDetails}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#fff",
              headerTitle: "Bank Details",
            }}
          />
          <Stack.Screen
            name="Contact"
            component={Contact}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#fff",
              headerTitle: "Contact Us",
            }}
          />
          <Stack.Screen
            name="Wallet"
            component={Wallet}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#fff",
              headerTitle: "Wallet",
            }}
          />

          <Stack.Screen
            name="Waiting Screen"
            component={WaitingScreen}
            options={{ headerShown: false }}
            // options={{
            //   headerBackground: () => (
            //     <View style={{ backgroundColor: "#004D4D", height: 100 }} />
            //   ),
            //   headerBackButtonMenuEnabled: false,
            //   headerBackTitleVisible: false,
            //   headerTintColor: "#fff",
            //   headerTitle: "Waiting",
            // }}
          />
          <Stack.Screen
            name="Map"
            component={Map}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),

              headerTintColor: "#fff",
              headerTitle: "My Store Location",
            }}
          />
          <Stack.Screen
            name="StepFour"
            component={StepFour}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#fff",
              headerTitle: "",
            }}
          />
          <Stack.Screen
            name="bootom"
            component={Bootom}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="Prescription"
            component={Prescription}
            options={{
              headerBackground: () => (
                <View style={{ backgroundColor: "#004D4D", height: 100 }} />
              ),
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#fff",
              headerTitle: "",
            }}
          />
          <Stack.Screen
            name="Otp"
            component={Otp}
            headerShown={false}
            options={{
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#004D4D",
              headerTitle: "Enter OTP",
              headerTitleStyle: {
                fontFamily: "Manrope-SemiBold",
                fontSize: 20,
              },
              headerStyle: {
                backgroundColor: "#fff",
              },
            }}
          />
          <Stack.Screen
            name="CatergoryDetail"
            component={CatergoryDetail}
            options={{
              headerBackButtonMenuEnabled: false,
              headerBackTitleVisible: false,
              headerTintColor: "#004D4D",
              headerTitle: "Search Medicine",
              headerTitleStyle: {
                fontFamily: "Manrope-SemiBold",
                fontSize: 20,
              },
              headerStyle: {
                backgroundColor: "#fff",
                textAlign: "left",
              },
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
      <Toast />
    </ContextProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#004D4D",
    alignItems: "center",
    justifyContent: "center",
  },
  logo: {
    resizeMode: "contain",
    width: 200,
    height: 100,
  },
  user: {
    resizeMode: "contain",
    width: 200,
    height: 200,
  },
});