import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import HomeScreen from './src/screens/HomeScreen';
import ConcertDetailScreen from './src/screens/ConcertDetailScreen';
import EditConcertScreen from './src/screens/EditConcertScreen';
import StatsScreen from './src/screens/StatsScreen';
import FullscreenImageScreen from './src/screens/FullscreenImageScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <StatusBar barStyle="light-content" backgroundColor="#000000" />
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
            animation: 'ios_from_right',
            contentStyle: { backgroundColor: '#000000' },
          }}
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="ConcertDetail" component={ConcertDetailScreen} />
          <Stack.Screen
            name="EditConcert"
            component={EditConcertScreen}
            options={{ animation: 'slide_from_bottom' }}
          />
          <Stack.Screen name="Stats" component={StatsScreen} />
          <Stack.Screen
            name="FullscreenImage"
            component={FullscreenImageScreen}
            options={{ animation: 'fade' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}