import React, { useEffect } from "react";
import { Image } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Entypo, FontAwesome } from "@expo/vector-icons";
import OrderDetails from "../src/screens/OrderDetails";
import OrdersFollowUp from "../src/screens/OrdersFollowUp";
import { Dimensions } from "react-native";
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 { connect } from "react-redux";
import Profile from "../src/screens/Profile";
import Videos from "../src/screens/Videos";
import Exams from "../src/screens/Exams";
import ShoppingCart from "../src/screens/ShoppingCart";
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 { user } from "../src/redux/actions";

//assets
import homeDeactiveIcon from "../src/assets/icons/home-deactive.png";
import homeActiveIcon from "../src/assets/icons/home-active.png";
import videoActiveIcon from "../src/assets/icons/video-active.png";
import videoDeactiveIcon from "../src/assets/icons/video-deactive.png";
import bookDeactiveIcon from "../src/assets/icons/book-deactive.png";
import bookActiveIcon from "../src/assets/icons/book-active.png";
import testDeactiveIcon from "../src/assets/icons/test-deactive.png";
import testActiveIcon from "../src/assets/icons/test-active.png";
import profileActiveIcon from "../src/assets/icons/profile-active.png";
import profileDeactiveIcon from "../src/assets/icons/profile-deactive.png";

const width = Dimensions.get("window").width;

const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="HomeTab"
      screenOptions={{
        tabBarHideOnKeyboard: true,
        headerShown: false,
        tabBarActiveTintColor: "#06BACE",
        tabBarInactiveTintColor: "grey",
        tabBarStyle: {
          backgroundColor: "#CCE6FF",
          height: 70,
        },
        tabBarLabelStyle: {
          fontSize: width / 34,
          fontFamily: "regular",
          transform: [{ translateY: -7 }],
        },
        tabBarShowLabel: true,
        // tabBarLabel : 'reza'
      }}
    >
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          title: "پروفایل",
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image
                source={profileActiveIcon}
                style={{ width: 33, height: 32 }}
              />
            ) : (
              <Image
                source={profileDeactiveIcon}
                style={{ width: 33, height: 32 }}
              />
            ),
        }}
      />
      <Tab.Screen
        name="Tests"
        component={Tests}
        options={{
          title: "آزمون",
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image
                source={testActiveIcon}
                style={{ width: 33, height: 32 }}
              />
            ) : (
              <Image
                source={testDeactiveIcon}
                style={{ width: 33, height: 32 }}
              />
            ),
        }}
      />
      <Tab.Screen
        name="VODTab"
        component={VODStackScreen}
        options={{
          unmountOnExit: true,
          unmountOnBlur: true,
          title: "ویدئوها",
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image
                source={videoActiveIcon}
                style={{ width: 32, height: 28 }}
              />
            ) : (
              <Image
                source={videoDeactiveIcon}
                style={{ width: 32, height: 28 }}
              />
            ),
        }}
      />
      <Tab.Screen
        name="ProductsTab"
        component={ProductsStackScreen}
        options={{
          title: "کتاب‌ها",
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image
                source={bookActiveIcon}
                style={{ width: 35, height: 34 }}
              />
            ) : (
              <Image
                source={bookDeactiveIcon}
                style={{ width: 35, height: 34 }}
              />
            ),
        }}
      />
      <Tab.Screen
        name="HomeTab"
        component={HomeStackScreen}
        options={{
          title: "خانه",
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image
                source={homeActiveIcon}
                style={{ width: 33, height: 33 }}
              />
            ) : (
              <Image
                source={homeDeactiveIcon}
                style={{ width: 33, height: 33 }}
              />
            ),
        }}
      />
    </Tab.Navigator>
  );
};

const HomeStack = createNativeStackNavigator();
const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator
      screenOptions={{ headerShown: false }}
      initialRouteName="Home"
    >
      <HomeStack.Screen name="Home" component={Home} />
      <VODStack.Screen name="VOD" component={Videos} />
      <ProductsStack.Screen name="Products" component={Products} />
      <VODStack.Screen name="Video" component={Video} />
      <HomeStack.Screen name="Product" component={Product} />
    </HomeStack.Navigator>
  );
};

const ProductsStack = createNativeStackNavigator();
const ProductsStackScreen = () => {
  return (
    <ProductsStack.Navigator screenOptions={{ headerShown: false }}>
      <ProductsStack.Screen name="Products" component={Products} />
      <ProductsStack.Screen name="Product" component={Product} />
    </ProductsStack.Navigator>
  );
};

const VODStack = createNativeStackNavigator();
const VODStackScreen = () => {
  return (
    <VODStack.Navigator screenOptions={{ headerShown: false }}>
      <VODStack.Screen name="VOD" component={Videos} />
      <VODStack.Screen name="Video" component={Video} unmountOnExit={true} />
      <VODStack.Screen name="VideoDisplay" component={VideoDisplay} />
    </VODStack.Navigator>
  );
};

const AuthStack = createNativeStackNavigator();
const AuthStackScreen = () => {
  return (
    <AuthStack.Navigator
      screenOptions={{ headerShown: false }}
      // initialRouteName="Splash"
    >
      <AuthStack.Screen name="Splash" component={Splash} />
      <AuthStack.Screen name="Login" component={Login} />
      <AuthStack.Screen name="Otp" component={Otp} />
    </AuthStack.Navigator>
  );
};

const Stack = createNativeStackNavigator();
const Navigation = ({ getStatus, isLogin }) => {
  useEffect(() => {
    getStatus();
  }, []);
  return (
    <NavigationContainer>
      <Stack.Navigator
        // initialRouteName="Root"
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="QR" component={QR} />
        <Stack.Screen name="Root" component={BottomTabNavigator} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Otp" component={Otp} />
        <Stack.Screen name="Orders" component={OrdersFollowUp} />
        <Stack.Screen name="Order" component={OrderDetails} />
        <Stack.Screen name="Faq" component={Faq} />
        <Stack.Screen name="Activation" component={Activation} />
        <Stack.Screen name="QRContent" component={QRContent} />
        <Stack.Screen name="Contact" component={Contact} />
        <Stack.Screen name="AR" component={AR} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const mapStateToProps = (state) => ({
  isLogin: state.user.status,
});
const mapDispatchToProps = {
  getStatus: user.getStatus,
};
export default connect(mapStateToProps, mapDispatchToProps)(Navigation);