import React, { useEffect, useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator,TransitionPresets ,} from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign, Ionicons } from '@expo/vector-icons';
import {ToastAndroid, Platform, UIManager,} from 'react-native';
import { UpdateAsync } from './UpdateAsync.js';
import Apps from './Apps';
import tndView from './ndView';
import trainbase from './trainbaseview';
import howto from './howto';
import menu from './menu';
import News from './components/news.js';
import TestArea from './TestArea.js';
import Setting from './components/settings.js';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}
export default function App(){
  const navigationRef = useRef();
  var platform = Platform.OS === "android" ? 70 : 50;
  useEffect(()=>UpdateAsync(),[])
  return(
      <NavigationContainer name= "Root"  ref={navigationRef} style={{flex:1}}>
        <Tab.Navigator>
          <Stack.Screen name="login"   component={top}  options={{ tabBarLabel: '位置情報',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<AntDesign name="barchart"  size={32} />),}}/>
          <Stack.Screen name="menuPage"   component={menuPage}  options={{ tabBarLabel: 'リンク',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<Ionicons name="ios-radio" size={platform}/>),}}/>
          <Stack.Screen name="home"   component={tndView}  options={{ tabBarLabel: '運行情報',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<Ionicons name="md-train" size={32}/>),}}/>
          
        </Tab.Navigator>
      </NavigationContainer>
    
  )
}
function top(){
  return(
    <Stack.Navigator>
      <Stack.Screen name="Apps"   component={Apps}  options={{headerShown: false,gestureEnabled:true,headerTransparent:true,}}/>
      <Stack.Screen name="trainbase"   component={trainbase}  options={{ title: 'トレインビジョン',gestureEnabled:true,...TransitionPresets.SlideFromRightIOS}}/>
      <Stack.Screen name="howto"   component={howto}  options={{ title: '使い方',gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}}/>
      <Stack.Screen name="test"   component={TestArea} options={{}}/>
      <Stack.Screen name="news" component={News} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
    </Stack.Navigator>
  )
}
function menuPage(){
  return(
    <Stack.Navigator>
      <Stack.Screen name="menu"   component={menu}  options={{headerShown: false,gestureEnabled:true,headerTransparent:true,}}/>
      <Stack.Screen name="setting" component={Setting} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
    </Stack.Navigator>
  )
}