// import/setup //

import React, { useState } from 'react';
import { View, Text, StyleSheet, ImageBackground, TouchableOpacity, Picker } from 'react-native';
import DocumentPicker from 'react-native-document-picker';

// text/button style //
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
},
background: {
flex: 1,
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
welcomeText: {
fontSize: 24,
fontWeight: 'bold',
color: '#000',
marginBottom: 20,
},
buttonContainer: {
backgroundColor: '#fff',
borderRadius: 30,
paddingVertical: 10,
paddingHorizontal: 20,
marginBottom: 50,
},
buttonText: {
fontSize: 16,
fontWeight: 'bold',
color: '#555',
},
dropdownContainer: {
backgroundColor: '#fff',
borderRadius: 30,
paddingVertical: 10,
paddingHorizontal: 20,
marginBottom: 50,
flexDirection: 'row',
alignItems: 'center',
},
dropdown: {
flex: 1,
marginLeft: 10,
},
});

// setting up the pdf/file uploading button, although it doesn't work yet //

function HomeScreen() {
const [selectedFile, setSelectedFile] = useState(null);
const [showDropdown, setShowDropdown] = useState(false);
const [selectedOption, setSelectedOption] = useState('none');

const selectFile = async () => {
try {
const result = await DocumentPicker.pick({
type: [DocumentPicker.types.allFiles],
});
setSelectedFile(result.uri);
setSelectedOption('upload');
setShowDropdown(false);
} catch (error) {
console.log('Error picking file:', error);
}
};

const handleDropdownChange = (value) => {
setSelectedOption(value);
setShowDropdown(false);
if (value === 'none') {
setSelectedFile(null);
}
};

// background pic //
const imageUrl = 'https://i.pinimg.com/originals/b2/9b/89/b29b8951b96566243c4eb9d15643de65.png';

return (
<View style={styles.container}>
<ImageBackground source={{ uri: imageUrl }} style={styles.background}>
<Text style={styles.welcomeText}>Welcome to My Studying App!</Text>
<TouchableOpacity style={styles.buttonContainer} onPress={() => setShowDropdown(true)}>
<Text style={styles.buttonText}>+ New</Text>
</TouchableOpacity>
{showDropdown && (
<View style={styles.dropdownContainer}>
<Text>Select an option:</Text>
<Picker
style={styles.dropdown}
selectedValue={selectedOption}
onValueChange={(value) => handleDropdownChange(value)}
>
<Picker.Item label="Continue without PDF" value="none" />
<Picker.Item label="Upload PDF" value="upload" />
</Picker>
</View>
)}
{selectedOption === 'upload' && (
<Text style={{ marginTop: 20 }}>
Selected file: {selectedFile}
</Text>
)}
</ImageBackground>
</View>
);
}

export default HomeScreen;