import React, {useState, useEffect} from 'react';

import {StyleSheet, Appearance} from 'react-native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

import {useSelector, useDispatch} from 'react-redux';
import {RootState} from '@caj/redux/store';
import {appVarActions} from '@caj/configs/appVarReducer';

import imgSrc from '@caj/img/maimg.png';
import {placeholder} from '@caj/lang/default';
import {getBackgroundColor} from '@caj/configs/colors';
import {saveVarChanges} from '@caj/helper/appData';

import {Box, Input, VStack, Center, Avatar, Text, Button} from 'native-base';
import {View} from 'react-native';

import {
  LinkingOptions,
  NavigationContainer,
  useNavigation,
} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const styles = StyleSheet.create({
  container: {
    height: '100%',
    flex: 1,
  },
});

export const linking: LinkingOptions<{
  Maps: string;
  Home: string;
  Chat: string;
  Settings: string;
}> = {
  prefixes: ['http://'],
  config: {
    screens: {
      Maps: 'mapss',
      Home: 'account',
      Chat: 'chats',
      Settings: 'settingss',
    },
  },
};

export type HomeStackNavigatorParamList = {
  Account: undefined;
  Maps: undefined;
  Chat: undefined;
  Test: undefined;
  Settings: undefined;
};

export type HomeScreenNavigationProp =
  NativeStackNavigationProp<HomeStackNavigatorParamList>;

export default function Navigation() {
  const theme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );

  const dispatch = useDispatch();

  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Home" component={HomeStackScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
      <Tab.Screen
        name="Chat"
        options={{headerShown: true, tabBarStyle: {display: 'none'}}}
        component={ChatScreen}
      />
    </Tab.Navigator>
  );
}

function ChatScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Chat!</Text>
    </View>
  );
}

function HomeScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home screen</Text>
      <Button onPress={() => navigation.navigate('Test')}>Go to Test</Button>
    </View>
  );
}

export type SettingsStackNavigatorParamList = {
  Chat: undefined;
  Settings: undefined;
};

export type SettingsScreenNavigationProp =
  NativeStackNavigationProp<SettingsStackNavigatorParamList>;

function SettingsScreen() {
  const navigation = useNavigation<SettingsScreenNavigationProp>();
  const navigation2 = useNavigation<HomeScreenNavigationProp>();
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings screen</Text>
      <Button onPress={() => navigation2.navigate('Maps')}>Go to Chat</Button>
    </View>
  );
}

const HomeStack = createNativeStackNavigator<HomeStackNavigatorParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Maps"
        options={{headerShown: false}}
        component={HomeScreen}
      />
      <HomeStack.Screen name="Test" component={ChatScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createNativeStackNavigator<HomeStackNavigatorParamList>();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Chat" component={ChatScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();