import { NavigationContainer, NavigatorScreenParams } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StatusBar } from 'expo-status-bar';
import { QueryClient, QueryClientProvider } from 'react-query';
import Chapter from './src/pages/chapter';
import Comic from './src/pages/comic';
import ComicProfile from './src/pages/comicprofile';
import Home from './src/pages/home';
import { ComicProviderKey } from './src/provider';
import { NonLocalProviderKey } from './src/provider/local';
import Save from './src/pages/save';
import ComicList, { TabParamList } from './src/pages/comiclist';

const Stack = createNativeStackNavigator<RootStackParamList>();
const queryClient = new QueryClient();

export type RootStackParamList = {
  OldHome: undefined;
  Home: NavigatorScreenParams<TabParamList>;
  ComicProfile: { provider: ComicProviderKey; comicId: string; };
  Chapter: { provider: ComicProviderKey; comicId: string; chapterId: string; };
  Page: { provider: ComicProviderKey; comicId: string; pageId: string; };
  Save: { provider: NonLocalProviderKey; comicId: string; };
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={ComicList} options={{
            headerShown: false,
          }} />
          <Stack.Screen name="OldHome" component={Home} />
          <Stack.Screen name="ComicProfile" component={ComicProfile} />
          <Stack.Screen name="Chapter" component={Chapter} />
          <Stack.Screen name="Page" component={Comic} />
          <Stack.Screen name="Save" component={Save} />
        </Stack.Navigator>
        <StatusBar style='dark' />
      </NavigationContainer>
    </QueryClientProvider>
  );
}