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 { 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();

  return (
    <ThemedView style={{ flex: 1, padding: 16 }}>
      <ThemedText type="title">
        My Journey
      </ThemedText>
      <ThemedText>{theme.colors.primary}</ThemedText>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  headerImage: {
    width: 200,
    height: 200,
    bottom: 0,
    left: 20,
    position: 'absolute',
  },
});