import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Platform } from "react-native";
import TNDView from "./ndView";
import { initIcon } from "./lib/initIcon";
import { Top } from "./Top.js";
import { MenuPage } from "./MenuPage.js";
import { useAreaInfo } from "./stateBox/useAreaInfo.js";
import "./components/ActionSheetComponents/sheets.js";

const Tab = createBottomTabNavigator();
export function AppContainer() {
    const { areaInfo, areaIconBadgeText } = useAreaInfo();
    const navigationRef = React.useRef();
    return (
      <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
        <Tab.Navigator
          tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
          initialRouteName="menuPage"
          lazy={false}
        >
          <Tab.Screen
            name="login"
            options={{
              tabBarLabel: "位置情報",
              headerTransparent: true,
              gestureEnabled: true,
              tabBarIcon: initIcon("barchart", "AntDesign"),
            }}
          >
            {(props) => <Top {...props} navigationRef={navigationRef} />}
          </Tab.Screen>
          <Tab.Screen
            name="menuPage"
            options={{
              tabBarLabel: "リンク",
              headerTransparent: true,
              gestureEnabled: true,
              tabBarIcon: initIcon("radio", "Ionicons"),
            }}
            component={MenuPage}
          />
  
          <Tab.Screen
            name="home"
            options={{
              tabBarLabel: "運行情報",
              headerTransparent: true,
              gestureEnabled: true,
              tabBarIcon: initIcon("train", "Ionicons"),
              tabBarBadge: areaInfo ? areaIconBadgeText : undefined,
            }}
          >
            {(props) => <TNDView {...props} />}
          </Tab.Screen>
        </Tab.Navigator>
      </NavigationContainer>
    );
  }