import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './Home';
import ProfileScreen from './Profile';
import LoginScreen from './Login';
import SignupScreen from './Signup';
import AsyncStorage from '@react-native-async-storage/async-storage';
import SwitScreen from './Swit';
import UserProfileScreen from './UserProfile';
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import FollowingScreen from './Following';
import SwitDetailScreen from './SwitDetail';
import SettingsScreen from './Settings';
import SearchScreen from './Search';
import Toast from 'react-native-toast-message'
import Notifications from './Notification';
import LikesScreen from './LikesScreen';
import { socket } from './services/socket';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { SafeAreaView } from 'react-native-safe-area-context';
import EditProfileScreen from './EditProfileScreen';
import DirectMessagesScreen from './DirectMessagesScreen';
import ConversationScreen from './ConversationScreen';




const Tab = createBottomTabNavigator();
const HomeStack = createNativeStackNavigator();
const HomeTopTab = createMaterialTopTabNavigator();

function HomeTopTabNavigator() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <HomeTopTab.Navigator>
        <HomeTopTab.Screen name="Home" component={HomeScreen} />
        <HomeTopTab.Screen name="Following" component={FollowingScreen} />
      </HomeTopTab.Navigator>
    </SafeAreaView>
  );
}


function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen 
        name="HomeTab" 
        component={HomeTopTabNavigator} 
        options={{ headerShown: false }} 
      />
      <HomeStack.Screen 
        name="Swit" 
        component={SwitScreen} 
        options={{title:'New swit'}}
      />
      <HomeStack.Screen 
        name="Profile" 
        component={UserProfileScreen} 
        options={({ route }) => ({ title: route.params.username })}
      />
      <HomeStack.Screen 
        name="SwitDetail" 
        component={SwitDetailScreen} 
      />
      <HomeStack.Screen 
        name="Settings" 
        component={SettingsScreen} 
      />
      <HomeStack.Screen 
        name="Login" 
        children={() => <LoginScreen setUserToken={setUserToken} />} 
      />
      <HomeStack.Screen 
        name="Signup" 
        component={SignupScreen} 
      />
      <HomeStack.Screen 
        name="Likes" 
        component={LikesScreen} 
      />
      <HomeStack.Screen
        name="EditProfile"
        component={EditProfileScreen}
        options={{title: 'Edit Profile'}}
      />
      <HomeStack.Screen
      name="Conversation"
      component={ConversationScreen}
      options={({ route }) => ({ title: route.params.username })}
      />

    </HomeStack.Navigator>
  );
}


export default function App() {
  const [userToken, setUserToken] = useState(null);
  // Listen for 'notification' messages



  const checkUserToken = async () => {
    const token = await AsyncStorage.getItem('token');
    setUserToken(token);
  };

  useEffect(() => {
    checkUserToken();
  }, []);

  useEffect(() => {
    const setDefaultAPI = async () => {
      const apiEndpoint = await AsyncStorage.getItem('apiEndpoint');
      if (!apiEndpoint) {
        await AsyncStorage.setItem('apiEndpoint', 'http://staging.swifter.win');
      }
    };

    setDefaultAPI();
  }, []);

  return (
    <>
    <TailwindProvider utilities={utilities}>
    <NavigationContainer>
    {userToken ? (
      <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      }}
      >
        <Tab.Screen name="Home" component={HomeStackScreen} options={{ headerShown: false}}/>
        <Tab.Screen name="Search" component={SearchScreen} />
        <Tab.Screen name="Notifications" component={Notifications} />
        <Tab.Screen name="DirectMessages" component={DirectMessagesScreen} options={{title:"DMs"}}/>

        <Tab.Screen name="Profile" component={ProfileScreen} />
        
      </Tab.Navigator>
    ) : (
      <Tab.Navigator initialRouteName="Login">
        <Tab.Screen name="Login" children={() => <LoginScreen setUserToken={setUserToken} />} />
        <Tab.Screen name="Signup" component={SignupScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    )}
  </NavigationContainer>
  </TailwindProvider>
  <Toast />
  </>
  );
}