import React from 'react';
import {
    View,
    ScrollView,
    TouchableOpacity,
    Text,
    Image
} from 'react-native';
// Redux
import { connect } from 'react-redux';
import { initDocuments } from '../Store/Actions/documents';
// Treeview
import TreeView from 'react-native-animated-tree-view';
// Icon
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
// Assets
import arrowDown from '../../Resources/assets/img/arrow_down.png';
// Styles
import styles from '../../Resources/Styles/DirectoriesStyle';

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

class DirectoriesScreen extends React.Component {
    state = {
        documents: [],
    };

    render() {
        const { folder } = this.props.route.params;
        let documentList = this.state.documents.map(document => {
            return (
                <TouchableOpacity
                    key={document.id.toString()}
                    style={{ ...styles.file, backgroundColor: this.props.mainColor }}
                    onPress={() => this.openDocument(document)}>
                    {document.type === 'pdf' ? (
                        <FontAwesome5 name="file-pdf" color={'white'} size={60} />
                    ) : (
                        <FontAwesome5 name="file-video" color={'white'} size={60} />
                    )}
                    <Text style={styles.fileTxt}>{document.title}</Text>
                </TouchableOpacity>
            );
        });

        return (
            <View style={styles.container}>
                <View
                    style={{ width: 290, borderRightWidth: 1, borderColor: 'lightgrey' }}>
                    <TreeView
                        data={folder}
                        leftImage={{}}
                        rightImage={{ uri: Image.resolveAssetSource(arrowDown).uri }}
                        containerStyle={styles.treeviewContainer}
                        onClick={folder => {
                            this.setState({
                                documents: this.props.documents.filter(
                                    tmp => tmp.directory === folder.id,
                                )
                            });
                        }}
                    />
                </View>
                <ScrollView style={styles.scrollview}>
                    <View style={styles.filesContainer}>{documentList}</View>
                </ScrollView>
            </View>
        );
    }

    openDocument(document) {
        this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
        if (document.type === 'pdf') {
            this.props.navigation.navigate('PDFScreen', { uuid: document.uuid });
        } else if (document.type === 'mp4') {
            this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
        } else {
            console.log('Inconnu');
        }
    }
}

export default connect(mapStateToProps)(DirectoriesScreen);