import React from 'react';
import { View, Button, Alert, Text } from 'react-native';
// Redux
import { connect } from 'react-redux';
// Style
import styles from '../../Resources/Styles/SyncStyle';
// Translations
import i18n from "../../I18n";
// Controller 
import SyncController from '../Controllers/SyncController';
// Progress
import * as Progress from 'react-native-progress';

function mapStateToProps(state) {
    return {
        documents: state.documents,
        syncVersion: state.syncVersion,
        currentUser: state.currentUser,
    };
}

class SyncScreen extends React.Component {
    state = {
        progress: 0,
        txtStep: '',
        downloadProgress: 0,
        downloadingFile: false,
        processing: false,
        newApp: false
    };

    render() {
        const fileProgress = this.fileProgress();
        return (
            <View style={styles.container}>
                <Progress.Circle
                    size={250}
                    progress={this.state.progress}
                    showsText={true}
                    color={'#ce3029'}
                />
                <View style={styles.btnWrapper}>
                    <Button
                        disabled={this.state.processing}
                        color={'#ce3029'}
                        title={i18n.t('sync_s.start_sync')}
                        onPress={() => this.sync()}
                    />
                </View>
                <View style={styles.btnWrapper}>
                    <Text>
                        {this.state.txtStep} {fileProgress}
                    </Text>
                </View>
            </View>
        );
    }

    async sync() {
        if (!SyncController.checkConnection()) {
            Alert.alert(
                i18n.t('global.warning'),
                i18n.t('error.must_be_connected_internet_sync')
            );
            return;
        }
        this.setState({ processing: true });
        // getVersion
        const resVersion = await SyncController.getVersion().then(res => {
            return res.data;
        }).catch(error => {
            console.log(error);
            Alert.alert(
                i18n.t('error.error'),
                i18n.t('error.error_has_occurred')
            );
        });
        this.setState({ newApp: resVersion.newApp });
        // getUsers
        this.setState({ txtStep: i18n.t('sync_s.updating_users') + '...' });
        // const resUsers = await SyncController.getUsers().then(res => {
        //     return res.data;
        // }).catch(error => {
        //     console.log(error);
        //     Alert.alert(
        //         i18n.t('error.error'),
        //         i18n.t('error.error_has_occurred')
        //     );
        // });
        // End
        this.setState({ txtStep: i18n.t('sync_s.update_completed') + '.', processing: false });
    }

    fileProgress() {
        if (this.state.downloadingFile === true) {
            return this.state.downloadProgress + ' %';
        }
    }
}

export default connect(mapStateToProps)(SyncScreen);