import React from 'react';
import { View, ImageBackground, TextInput, Button, Image, Alert } from 'react-native';
// Redux
import { connect } from 'react-redux';
// SplashScreen 
import * as SplashScreen from 'expo-splash-screen';
// Common Styles 
import commonStyles from '../../Resources/CommonStyles';
// Style
import styles from '../../Resources/Styles/LoginStyle';
// Translations
import i18n from "../../I18n";
// FileSytem
import * as FileSystem from 'expo-file-system';
// Controller
import LoginController from '../Controllers/LoginController';
// Database
import { Setting } from '../../Database';
import SyncController from '../Controllers/SyncController';

function mapStateToProps(state) {
    return {
        app: state.app,
        users: state.users.users,
        locale: state.locale.locale,
        mainColor: state.app.mainColor
    };
}

const mapDispatchToProps = dispatch => {
    return {
        setCurrentUser: () => dispatch({ type: 'SET_CURRENT_USER' }),
    };
};

class LoginScreen extends React.Component {
    state = {
        login: '',
        password: '',
    };

    componentDidMount() {
        if (SyncController.isLogged()) {
            this.props.setCurrentUser(false);
        }
        SplashScreen.hideAsync();
    }

    render() {
        return (
            <ImageBackground source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }} style={commonStyles.background}>
                <View style={styles.container}>
                    <Image source={{ uri: FileSystem.documentDirectory + 'SquaredLogo.png' }} style={styles.logo} />
                    <View>
                        <TextInput
                            style={styles.text}
                            placeholder={i18n.t('login_s.username')}
                            value={this.state.login}
                            onChangeText={text => this.setState({ login: text.toLowerCase() })}
                            autoCapitalize={'none'}
                            autoCorrect={false}
                            keyboardType={'email-address'}
                        />
                        <TextInput
                            style={styles.text}
                            placeholder={i18n.t('login_s.password')}
                            value={this.state.password}
                            onChangeText={text => this.setState({ password: text })}
                            secureTextEntry={true}
                            autoCapitalize={'none'}
                            autoCorrect={false}
                        />
                        <Button
                            title={i18n.t('global.login')}
                            onPress={() => this.login(this.state.login, this.state.password)}
                            color={this.props.mainColor}
                        />
                    </View>
                </View>
            </ImageBackground >
        );
    }

    async login(login, password) {
        if (login === '' || password === '') {
            Alert.alert(i18n.t("global.warning"), i18n.t('error.must_fill_login_fields'));
            return;
        }
        var usersSize = Object.keys(this.props.users).length;
        if (usersSize === 0) {
            Alert.alert(i18n.t("global.warning"), i18n.t('login_s.missing_users'));
            return;
        }
        let user = this.props.users.filter(tmp => tmp.email === login);
        if (user.length === 0) {
            Alert.alert(i18n.t('error.error'), i18n.t('error.incorrect_credentials'));
            return;
        }
        user = user[0];
        const verified = LoginController.verify(user, password).then(verified => verified);
        if (!verified) {
            Alert.alert(i18n.t('error.error'), i18n.t('error.incorrect_credentials'));
            return;
        }
        const isConnected = await SyncController.checkConnection().then(state => {
            //console.log(state.isConnected)
            return state.isConnected
        }).catch(error => {
            //console.log(error);
            return false;
        });
        const lastUser = Setting.get('lastUser');
        // Si on est sur une installation
        if (lastUser === false || lastUser == undefined) {
            // Si la tablette est connectée à internet pour forcer la synchro
            if (!isConnected) {
                Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_connected_internet'));
                return;
            }
            return this.loginAction(user);
        }
        // Si on a deja une install
        if (lastUser !== false && lastUser !== undefined) {
            // Si on a une précédente connexion
            if (lastUser.value === user.id.toString()) {
                this.loginAction(user);
            } else { // Si le user precedent est different du user courant
                // Si user !== last user && last user not synced
                if (!SyncController.isSynced()) {
                    Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_synced_last_user'));
                    return;
                }
                // Si la tablette est connectée à internet pour forcer la synchro
                if (!isConnected) {
                    Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_connected_internet'));
                    return;
                }
                SyncController.setInstalled(true);
                this.loginAction(user, true);
            }
        }
    }

    loginAction(user) {
        this.setState({ login: '', password: '' });
        LoginController.login(user);
        this.props.setCurrentUser();
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);