import { createNavigationContainerRef, NavigatorScreenParams } from "@react-navigation/core";
import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
import RNBootSplash from "react-native-bootsplash";
import { NavigationContainer } from "@react-navigation/native";

import { Home } from "screens/Home";
import { useStore } from "store";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Buttons } from "screens/Buttons";
import { Typography } from "screens/Typography";
import { Blank } from "screens/Blank";
import { BlankModal } from "screens/BlankModal";
import { HomeRow } from "screens/HomeRow";
import { HomeStack } from "screens/HomeStack";

export type MainRoutes = {
  TabNav: NavigatorScreenParams<TabNavRoutes>;
  BlankModal: undefined;
  BlankModalNoHeader: undefined;
};

const defaultNavigationOptions = {
  orientation: "portrait_up",
  headerTitleAlign: "center",
  headerBackTitleVisible: false,
  headerBackButtonMenuEnabled: false,
  statusBarTranslucent: true,
  statusBarColor: "transparent",
  navigationBarColor: "transparent",
  statusBarStyle: "dark",
} as NativeStackNavigationOptions;

export const navigationRef = createNavigationContainerRef<MainRoutes>();

const MainStack = createNativeStackNavigator<MainRoutes>();
export function Navigation() {
  const rehydrated = useStore((s) => s.rehydrated);

  if (!rehydrated) {
    return null;
  }
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        RNBootSplash.hide({ fade: true });
      }}
      onStateChange={() => {
        const currentRoute = navigationRef.current?.getCurrentRoute();
        if (currentRoute) {
          const currentRouteName = currentRoute.name;
          if (__DEV__) {
            console.log({ screen: currentRouteName });
          }
        }
      }}
    >
      <MainStack.Navigator screenOptions={defaultNavigationOptions}>
        <MainStack.Screen name="TabNav" component={TabNav} options={{ headerShown: false }} />
        <MainStack.Screen
          name="BlankModalNoHeader"
          component={BlankModal}
          options={{ presentation: "modal", headerShown: false }}
        />
        <MainStack.Screen name="BlankModal" component={BlankModal} options={{ presentation: "modal" }} />
      </MainStack.Navigator>
    </NavigationContainer>
  );
}

export type TabNavRoutes = {
  Tab1: NavigatorScreenParams<HomeNavRoutes>;
  Tab2: NavigatorScreenParams<HomeNavRoutes>;
  Tab3: NavigatorScreenParams<HomeNavRoutes>;
};
const TabStack = createBottomTabNavigator<TabNavRoutes>();
export function TabNav() {
  return (
    <TabStack.Navigator screenOptions={{ headerShown: false }}>
      <TabStack.Screen name="Tab1" component={Tab1} options={{ tabBarLabel: "Tab1" }} />
      <TabStack.Screen name="Tab2" component={Tab2} options={{ tabBarLabel: "Tab2" }} />
      <TabStack.Screen name="Tab3" component={Tab3} options={{ tabBarLabel: "Tab3" }} />
    </TabStack.Navigator>
  );
}

export type HomeNavRoutes = {
  Home: undefined;
  Buttons: undefined;
  Typography: undefined;
  HomeStack: undefined;
  HomeRow: undefined;
};

const HomeStackNav = createNativeStackNavigator<HomeNavRoutes>();
export function Tab1() {
  return (
    <HomeStackNav.Navigator screenOptions={defaultNavigationOptions}>
      <HomeStackNav.Screen name="Home" component={Home} />
      <HomeStackNav.Screen name="Buttons" component={Buttons} />
      <HomeStackNav.Screen name="Typography" component={Typography} />
      <HomeStackNav.Screen name="HomeStack" component={HomeStack} />
      <HomeStackNav.Screen name="HomeRow" component={HomeRow} />
    </HomeStackNav.Navigator>
  );
}

export type Tab2NavRoutes = {
  Blank: undefined;
};
const Tab2Stack = createNativeStackNavigator<Tab2NavRoutes>();

export function Tab2() {
  return (
    <Tab2Stack.Navigator screenOptions={defaultNavigationOptions}>
      <Tab2Stack.Screen name="Blank" component={Blank} />
    </Tab2Stack.Navigator>
  );
}

export type Tab3NavRoutes = {
  BlankNoHeader: undefined;
};
const Tab3Stack = createNativeStackNavigator<Tab3NavRoutes>();

export function Tab3() {
  return (
    <Tab3Stack.Navigator screenOptions={defaultNavigationOptions}>
      <Tab3Stack.Screen name="BlankNoHeader" component={Blank} options={{ headerShown: false }} />
    </Tab3Stack.Navigator>
  );
}