import React, { useEffect } from "react";
import { Restart } from "fiction-expo-restart";
import { I18nManager, StatusBar, Dimensions } from "react-native";
import * as Linking from "expo-linking";
import Svg, { G, Path } from "react-native-svg";
import { asyncAwesomeAlert } from "../src/utils/AsyncWrappers";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { connect } from "react-redux";
import { user, publicApi } from "../src/redux/actions";
import { useSafeAreaInsets } from "react-native-safe-area-context";
//components
import OrderDetails from "../src/screens/OrderDetails";
import OrdersFollowUp from "../src/screens/OrdersFollowUp";
import Splash from "../src/screens/Splash";
import Home from "../src/screens/Home";
import Products from "../src/screens/Products";
import Login from "../src/screens/Login";
import Otp from "../src/screens/Otp";
import Product from "../src/screens/Product";
import AR from "../src/screens/AR";
import QR from "../src/screens/QR";
import QRContent from "../src/screens/QRContent";
import Faq from "../src/screens/Faq";
import Activation from "../src/screens/Activation";
import Videos from "../src/screens/Videos";
import Video from "../src/screens/Video";
import VideoDisplay from "../src/screens/VideoDisplay";
import Contact from "../src/screens/Contact";
import Tests from "../src/screens/Tests";
import ShoppingCart from "../src/screens/ShoppingCart";
import DeliveryForm from "../src/screens/DeliveryForm";
import Address from "../src/screens/Address";
import Profile from "../src/screens/Profile";
import ProfileBookmark from "../src/screens/Profile/components/ProfileBookmark";
import ProfileAddress from "../src/screens/Profile/components/ProfileAddress";
import Blogs from "../src/screens/Blogs";
import Blog from "../src/screens/Blog";
import Sample from "../src/screens/Product/components/Sample";
import Info from "../src/screens/Product/components/Info";
import Rules from "../src/screens/Rules/index";
import MyCourses from "../src/screens/Profile/components/MyCourses";
import Ticket from "../src/screens/Contact/layouts/Ticket";
import Tickets from "../src/screens/Contact/layouts/Tickets";
import TicketStatus from "../src/screens/Contact/layouts/TicketStatus";
import MoreBlog from "../src/screens/Blogs/layouts/More";
//style
import Colors from "../src/constants/Colors";
import fontSize from "../src/constants/fontSize";
const Tab = createBottomTabNavigator();
const BottomTabNavigator = ({
theme,
userProducts,
bottomNavigation,
startUserGuide,
}) => {
const insets = useSafeAreaInsets();
const [headerShown, setHeaderShown] = React.useState(true);
React.useEffect(() => {
setTimeout(() => {
setHeaderShown(false);
}, 600);
}, []);
return (
{bottomNavigation.home.isActive ? (
(
)}
options={{
title: bottomNavigation.home.label,
tabBarIcon: ({ focused, color }) =>
focused ? (
) : (
),
}}
/>
) : null}
{bottomNavigation.products.isActive ? (
}
options={{
title: bottomNavigation.products.label,
tabBarIcon: ({ focused, color }) =>
focused ? (
) : (
),
}}
/>
) : null}
{bottomNavigation.vod.isActive ? (
}
options={{
unmountOnExit: true,
unmountOnBlur: true,
title: bottomNavigation.vod.label,
tabBarIcon: ({ focused, color }) =>
focused ? (
) : (
),
}}
/>
) : null}
{bottomNavigation.cart.isActive ? (
}
options={{
tabBarBadge: userProducts?.filter(
(product) => product?.condition < 2
).length
? userProducts?.filter((product) => product?.condition < 2)
?.length
: null,
tabBarBadgeStyle: {
color: "white",
backgroundColor:
theme === "light"
? Colors.theme1.greenCF
: Colors.theme1.greenCF,
fontSize: fontSize.sm,
paddingTop: 2,
color:
theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
borderWidth: 1,
borderColor:
theme === "light" ? Colors.theme1.greenCF : Colors.theme1.dark,
fontFamily: "bold",
},
title: bottomNavigation.cart.label,
tabBarIcon: ({ focused, color }) =>
focused ? (
) : (
),
}}
/>
) : null}
{bottomNavigation.profile.isActive ? (
}
options={{
title: bottomNavigation.profile.label,
tabBarIcon: ({ focused, color }) =>
focused ? (
) : (
),
contentStyle: {
backgroundColor: "white",
},
}}
/>
) : null}
);
};
const HomeStack = createNativeStackNavigator();
const HomeStackScreen = ({ theme, startUserGuide }) => {
return (
}
/>
);
};
const ProductsStack = createNativeStackNavigator();
const ProductsStackScreen = ({ theme }) => {
return (
);
};
const VODStack = createNativeStackNavigator();
const VODStackScreen = ({ theme }) => {
return (
);
};
const CARTStack = createNativeStackNavigator();
const CARTStackScreen = ({ theme }) => {
return (
);
};
const PROFILEStack = createNativeStackNavigator();
const PROFILEStackScreen = ({ theme }) => {
return (
);
};
const prefix = Linking.createURL("/");
const Stack = createNativeStackNavigator();
const Navigation = ({
getStatus,
userProducts,
ltr,
setLTR,
theme,
setOrientation,
bottomNavigation,
startUserGuide,
}) => {
const linking = {
prefixes: [prefix],
};
const setDirection = async () => {
setLTR();
await I18nManager.allowRTL(false);
};
useEffect(() => {
if (I18nManager.isRTL && !ltr) {
setDirection();
Restart();
}
getStatus();
StatusBar.setBarStyle(
`${theme === "light" ? "dark" : "light"}-content`,
true
);
}, []);
Dimensions.addEventListener("change", () => {
const dim = Dimensions.get("window");
setOrientation(dim.height > dim.width ? "portrait" : "landscape");
});
return (
(
)}
/>
);
};
const mapStateToProps = (state) => ({
userProducts: state.userProduct.list,
theme: state.publicApi.theme,
ltr: state.publicApi.ltr,
bottomNavigation: state.config.bottomNavigation,
});
const mapDispatchToProps = {
getStatus: user.getStatus,
setLTR: publicApi.setLTR,
setOrientation: publicApi.setOrientation,
};
export default connect(mapStateToProps, mapDispatchToProps)(Navigation);