import React from 'react';
import { View, ImageBackground, TextInput, Button, Image, Alert } from 'react-native';
// Redux
import { connect } from 'react-redux';
import { initContact } from '../Store/Actions/contacts';
// 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 {
        initContact: currentUser => dispatch(initContact(currentUser)),
        setCurrentUser: user => dispatch({
            type: 'SET_CURRENT_USER',
            data: JSON.stringify(user),
        }),
        setIsLogged: () => dispatch({ type: 'SET_LOGGED', data: true })
    };
};

class LoginScreen extends React.Component {
    state = {
        login: 'v@b.t',
        password: 'test',
    };

    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 })}
                            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 >
        );
    }

    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 lastUser = Setting.get('lastUser');
        // Si on est sur une installation
        if (lastUser === false || lastUser === undefined) {
            this.loginAction(user, true);
            return;
        }
        // Si on a deja une install avec une précédente connexion
        if (lastUser.value === user.id.toString()) {
            this.loginAction(user);
        } else {
            // Si user !== last user && last user not synced
            if (lastUser.value !== user.id.toString() && !SyncController.isSynced()) {
                Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_synced_last_user'));
                return;
            }
            // Si user !== last user
            if (lastUser.value !== user.id.toString()) {
                // Si la tablette est connectée à internet pour forcer la synchro
                if (!SyncController.checkConnection()) {
                    Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_connected_internet'));
                    return;
                }
                this.loginAction(user, true);
            }
        }
    }

    loginAction(user, forceSync = false) {
        this.setState({ login: '', password: '' });
        LoginController.login(user);
        this.props.setCurrentUser(user);
        this.props.setIsLogged();
        if (forceSync === true) {
            this.props.navigation.navigate('SyncScreen', { forceSync: true });
        }
    }
}

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