---
# System prepended metadata

title: Untitled

---

// 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;
