import React from 'react';
import { View, ImageBackground, TouchableOpacity, Text, Image } from 'react-native';
// Common Styles 
import commonStyles from '../../Resources/CommonStyles';
// Redux
import { connect } from 'react-redux';
import { initDocuments } from '../Store/Actions/documents';
// Style
import styles from '../../Resources/Styles/HomeStyle';
// Translations
import i18n from "../../I18n";
// FileSytem
import * as FileSystem from 'expo-file-system';

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

const mapDispatchToProps = dispatch => {
    return {
        init: (locale, directories) => {
            dispatch({ type: 'INIT' })
            dispatch(initDocuments(locale, directories))
        }
    };
};

class HomeScreen extends React.Component {

    componentDidMount() {
        this.props.init(this.props.locale.value, this.props.directories);
    }

    render() {
        i18n.locale = this.props.locale;
        return (
            <ImageBackground source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }} style={commonStyles.background}>
                <View style={styles.container}>
                    <TouchableOpacity onPress={() => this.openFolder(2)} style={styles.button}>
                        <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
                        <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('OnlyVideosScreen')} style={styles.button}>
                        <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
                        <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('ContactScreen')} style={styles.button}>
                        <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
                        <Text style={styles.btnTxt}>{i18n.t('global.contacts')}</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        );
    }

    openFolder(id) {
        const folder = this.props.directories.filter(tmp => tmp.id === id);
        this.props.navigation.navigate('DirectoriesScreen', { folder: folder });
    }
}

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