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 { 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 Setting from "./components/settings.js";
import trainMenu from "./components/trainMenu.js";
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
if (Platform.OS === "android") {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}
export default function App() {
  const navigationRef = useRef();
  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: () => <AntDesign name="barchart" size={32} />,
          }}
        />
        <Stack.Screen
          name="menuPage"
          component={menuPage}
          options={{
            tabBarLabel: "リンク",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: () => <Ionicons name="ios-radio" size={32} />,
          }}
        />
        <Stack.Screen
          name="home"
          component={tndView}
          options={{
            tabBarLabel: "運行情報",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: () => <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: "使い方",
          ...optionData,
        }}
      />
      <Stack.Screen name="news" component={News} options={optionData} />
      <Stack.Screen
        name="trainMenu"
        component={trainMenu}
        options={optionData}
      />
    </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={optionData} />
    </Stack.Navigator>
  );
}
const optionData = {
  gestureEnabled: true,
  ...TransitionPresets.ModalPresentationIOS,
  cardOverlayEnabled: true,
  headerTransparent: true,
  headerShown: false,
};