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

import {StyleSheet, Appearance, Dimensions} 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,
  NavigatorScreenParams,
  useNavigation,
} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AccountTab, {
  AccountStackNavigatorParamList,
  AccountTabName,
} from './tabs/main/AccountTab';
import CalendarTab, {
  CalendarStackNavigatorParamList,
} from './tabs/main/CalendarTab';
import MapsTab, {MapsStackNavigatorParamList} from './tabs/main/MapsTab';
import ChatTab, {ChatStackNavigatorParamList} from './tabs/main/ChatTab';
import {
  FadeInView,
  SlideFromLeftView,
  SlideFromRightView,
} from './helper/animations';
import {
  LoginStackNavigatorParamList,
  RegisterScreenAnim,
} from './components/NotLoggedIn';
import ChatMainScreen, {
  ChatMainStackNavigatorParamList,
} from './components/chat/screen/main';
import ChatScreenStack from './components/chat/screen/main';

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

export const linking: LinkingOptions<{}> = {
  prefixes: ['http://'],
};

export type RootStackNavigatorParamList = {
  Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
  Register: NavigatorScreenParams<LoginStackNavigatorParamList>;
  Chat: NavigatorScreenParams<ChatMainStackNavigatorParamList>;
};

export type RootScreenNavigationProp =
  NativeStackNavigationProp<RootStackNavigatorParamList>;

export default function Navigation() {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Home" component={HomeStack} />
      <Stack.Screen name="Register" component={RegisterScreenAnim} />
      <Stack.Screen
        name="Chat"
        component={ChatScreenStack}
        options={{animation: 'fade'}}
      />
    </Stack.Navigator>
  );
}

const Stack = createNativeStackNavigator<RootStackNavigatorParamList>();

export type HomeStackNavigatorParamList = {
  Account: NavigatorScreenParams<AccountStackNavigatorParamList>;
  Calendar: NavigatorScreenParams<CalendarStackNavigatorParamList>;
  Maps: NavigatorScreenParams<MapsStackNavigatorParamList>;
  ChatList: NavigatorScreenParams<ChatStackNavigatorParamList>;
};

function AccountTabAnim(props: any) {
  return (
    <SlideFromLeftView>
      <AccountTab {...props} />
    </SlideFromLeftView>
  );
}

function CalendarTabAnim(props: any) {
  return (
    <FadeInView>
      <CalendarTab {...props} />
    </FadeInView>
  );
}
function MapsTabAnim(props: any) {
  return (
    <FadeInView>
      <MapsTab {...props} />
    </FadeInView>
  );
}
function ChatTabAnim(props: any) {
  return (
    <SlideFromLeftView>
      <ChatTab {...props} />
    </SlideFromLeftView>
  );
}

function HomeStack() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false, unmountOnBlur: false}}>
      <Tab.Screen name="Account" component={AccountTabAnim} />
      <Tab.Screen name="Calendar" component={CalendarTabAnim} />
      <Tab.Screen name="Maps" component={MapsTabAnim} />
      <Tab.Screen name="ChatList" component={ChatTabAnim} />
    </Tab.Navigator>
  );
}

const Tab = createBottomTabNavigator<HomeStackNavigatorParamList>();
