import { Image } from 'expo-image';
import { Platform, StyleSheet, useColorScheme, View } from 'react-native';

import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { FAB, IconButton, List, Text, useTheme } from 'react-native-paper';
import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';

export default function HomeScreen() {
  const [dataDirectoryUri, setDirectoryUri] = useState<string | null>(null);

  useEffect(() => {
    const loadDirectoryUri = async () => {
      try {
        const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
        if (savedUri) {
          setDirectoryUri(savedUri);
        }
      } catch (error) {
        console.error('Error loading directory URI:', error);
      }
    };

    loadDirectoryUri();
  }, []);

  const theme = useTheme();


  const styles = StyleSheet.create({
    fab: {
      position: 'absolute',
      margin: 16,
      right: 0,
      bottom: 0,
      backgroundColor: theme.colors.primary, // Use your theme's primary color
    },
    stepContainer: {
      gap: 8,
      marginBottom: 8,
    },
    headerImage: {
      width: 200,
      height: 200,
      bottom: 0,
      left: 20,
      position: 'absolute',
    },
  });


  return (
    <ThemedView style={{ flex: 1, padding: 16 }}>
      <View style={{
        backgroundColor: theme.colors.primary,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: 100,
        zIndex: 1000,
      }} />
      <ThemedText>Directory: {dataDirectoryUri} </ThemedText>
      <FAB icon="plus" color={theme.colors.onPrimary} style={styles.fab} onPress={() => {
        console.log('Add new journey');
      }} />
    </ThemedView>
  );
}