// FileList.js

import React from "react";
import { View, Text, FlatList, TouchableOpacity, Image } from "react-native";

const FileList = ({ files, onFilePress }) => {
    return (
        <FlatList
            data={files}
            keyExtractor={(item) => item.path}
            renderItem={({ item }) => (
                <TouchableOpacity onPress={() => onFilePress(item)}>
                    <View
                        style={{
                            flexDirection: "row",
                            alignItems: "center",
                            padding: 10,
                            borderBottomWidth: 1,
                            borderBottomColor: "#ccc",
                        }}
                    >
                        <Image
                            source={
                                item.isDirectory()
? require("https://media.geeksforgeeks.org/wp-content/uploads/20240116233908/icons8-folder.gif")
: require("https://media.geeksforgeeks.org/wp-content/uploads/20240116233844/file.gif")
                            }
                            style={{ width: 24, height: 24, marginRight: 10 }}
                        />
                        <Text>{item.name}</Text>
                    </View>
                </TouchableOpacity>
            )}
        />
    );
};

export default FileList;

// FileExplorer.js

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import FileList from './FileList';
import RNFS from 'react-native-fs';

const FileExplorer = () => {
    const [currentPath, setCurrentPath] = useState(RNFS.ExternalStorageDirectoryPath);
    const [files, setFiles] = useState([]);

    useEffect(() => {
        loadFiles(currentPath);
    }, [currentPath]);

    const loadFiles = async (path) => {
        try {
            const result = await RNFS.readDir(path);
            setFiles(result);
        } catch (error) {
            console.error('Error reading directory:', error);
        }
    };

    const handleFilePress = (file) => {
        if (file.isDirectory()) {
            setCurrentPath(file.path);
        } else {
            console.log('File pressed:', file);
            // Add your logic to open/view the file
        }
    };

    const navigateUp = () => {
        const parts = currentPath.split('/');
        parts.pop(); // Remove the last part to go up one level

        // Join the parts back together to form the new path
        const parentPath = parts.join('/');

        setCurrentPath(parentPath);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>File Explorer</Text>
            <View style={styles.pathContainer}>
                <TouchableOpacity onPress={navigateUp} disabled={currentPath === RNFS.ExternalStorageDirectoryPath}>
                    <Image source={require('https://media.geeksforgeeks.org/wp-content/uploads/20240116233844/back_icon.gif')} 
                        style={styles.backIcon} />
                </TouchableOpacity>
                <Text style={styles.path}>{currentPath}</Text>
            </View>
            <FileList files={files} onFilePress={handleFilePress} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 30,
        backgroundColor: '#f0f0f0',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        textAlign: 'center',
        marginBottom: 10,
    },
    pathContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    backIcon: {
        width: 24,
        height: 24,
        marginRight: 10,
    },
    path: {
        fontSize: 16,
    },
});

export default FileExplorer;

//App.js

import React from 'react';
import { View } from 'react-native';
import FileExplorer from './FileExplorer';

const App = () => {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <FileExplorer />
        </View>
    );
};

export default App;