import { StatusBar } from 'expo-status-bar'
import { View, Pressable, Text, Alert} from 'react-native'
import React, { useCallback, useState } from 'react';
import stylesScreen from './style/screens.style'
import { TextInput } from 'react-native-gesture-handler';
import styles from "./style/SignIn.style";
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../redux/store';
import { updateIncorrectCredentials } from '../redux/features/credentialErrorsSlice';
import Dialog from "react-native-dialog";
import { useUserStore } from '../context/userContext';
import { MANAGER_CONVERSATION, MANAGER_GAME, MANAGER_SKIN, MANAGER_USER } from '../../appManagers';
import { socket } from "../../socketConfig";
import { useConversationStore } from '../context/conversationContext';
import { useGameStore } from '../context/gameContext';




function SignIn(props: { navigation: any; }) {
    const { navigation } = props
    const setUser = useUserStore((state) => state.setUser);

    const setTabConv = useConversationStore((state) => state.setTabConv);

    const setTabGame = useGameStore((state) => state.setTabGame);
    const setTabGameSolo = useGameStore((state) => state.setTabGameSolo);
    const setTabGameMulti = useGameStore((state) => state.setTabGameMulti);


    const errorList = useSelector((state: RootState) => state.credentialErrors.loginErrorList);
    const [pseudo, setPseudo] = useState('');
    const [password, setPassword] = useState('');
    const dispatch=useDispatch();

   if (errorList.incorrectCredentials){
            Alert.alert("Pseudo ou Mot de passe incorrect");
            dispatch(updateIncorrectCredentials(true));
    }

    let waitConnect=0;

    async function handleUserConnect(username: string, password: string){
        
        if (waitConnect==0){
            waitConnect=1;

            await MANAGER_USER.getLoaderUser().loadByUsernamePassword(username, password).then(async (res) => { 
                if (res!=null){
                    MANAGER_USER.setCurrentUser(res);
                    setUser(MANAGER_USER.getCurrentUser());
                    socket.emit("signIn", res);
                    await handleSkinLoad();
                    await handleConversationLoad();
                    await handleGameLoad();
                    /*
                    const conv=await MANAGER_CONVERSATION.getsaverConversation().saveConversation("Wesh la conv", res, [2,3], res.getUsername() + " a créé une conversation", new Date());
                    if (conv!=null){
                        MANAGER_CONVERSATION.getTabConv().push(conv);
                    }
                    */
                    MANAGER_CONVERSATION.getTabConv()?.forEach( conv =>{
                        socket.emit("inConv", conv);
                    });
                    navigation.navigate('HomeTab');   
                }
                else{
                    Alert.alert("Incorrect Username or Password");
                }

            });
            waitConnect=0;
        }
        return;      
    }

    async function handleConversationLoad(){
        const tmp = MANAGER_USER.getCurrentUser();
        if (tmp !== null) {
            await MANAGER_CONVERSATION.getLoaderConversation().loadByUser(tmp).then((res) => {
                MANAGER_CONVERSATION.setTabConv(res);
                setTabConv(res);
            });
        }
    }

    async function handleSkinLoad(){
        MANAGER_SKIN.setTabSkin(await MANAGER_SKIN.getLoaderSkin().loadAllSkin());
    }

    async function handleGameLoad(){
        MANAGER_GAME.setTabGame(await MANAGER_GAME.getLoaderGame().loadAllGame());
        MANAGER_GAME.getTabGame().forEach(game => {
            if (game.getNbPlayerMin()>1){
                MANAGER_GAME.getTabGameMulti().push(game);
            }
            else{
                MANAGER_GAME.getTabGameSolo().push(game);
            }
        });
        setTabGame(MANAGER_GAME.getTabGame());
        setTabGameMulti(MANAGER_GAME.getTabGameMulti())
        setTabGameSolo(MANAGER_GAME.getTabGameSolo());

    }

    



    


    return (
    <View style={stylesScreen.container}>
        <View style={stylesScreen.bodyCenter}>
            <TextInput style={styles.textInput} placeholder='Login' onChangeText={(val) => setPseudo(val)} autoCapitalize='none' />
            <TextInput style={styles.textInput} placeholder='Password' onChangeText={(val) => setPassword(val)} autoCapitalize='none' secureTextEntry={true}/>
            <Pressable style={styles.button} onPress={() => handleUserConnect(pseudo, password)}>
                <Text style={styles.text}>Se connecter</Text>
            </Pressable>
            <Pressable onPress={() => navigation.navigate('SignUp')}>
                <Text style={styles.textLink}>Pas de compte? Inscrivez vous !</Text>
            </Pressable>
        </View>
        {/*
        <Dialog.Container visible={false}>
            <Dialog.Title>Ce pseudo n'exsite pas</Dialog.Title>
            <Dialog.Button label="Fermer" onPress={() => dispatch(updateIncorrectCredentials(false))} />
        </Dialog.Container>
        <Dialog.Container visible={false}>
            <Dialog.Title>Mot de passe incorrect</Dialog.Title>
            <Dialog.Button label="Fermer" onPress={() => dispatch(updateIncorrectCredentials(false))} />
        </Dialog.Container>
*/}
    </View>
    
  );
}

export default SignIn
