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

export function AppContainer() {
  const Tab = createBottomTabNavigator();
  const { areaInfo, areaIconBadgeText, isInfo } = useAreaInfo();
  const navigationRef = React.useRef();
  const getTabProps = (name, label, icon, iconFamily, tabBarBadge, isInfo) => ({
    name,
    options: {
      tabBarLabel: label,
      headerShown: false,
      gestureEnabled: true,
      tabBarIcon: initIcon(icon, iconFamily,tabBarBadge,isInfo),
      
    },
  });
  const [fontLoaded, error] = useFonts({
    "JR-Nishi": require("./assets/fonts/jr-nishi.otf"),
    Zou: require("./assets/fonts/DelaGothicOne-Regular.ttf"),
    "JNR-font": require("./assets/fonts/JNRfont_pict.ttf"),
  });
  return (
    <NavigationContainer ref={navigationRef}>
      <Tab.Navigator
        initialRouteName="topMenu"
        screenOptions={{
          lazy: false,
          animation: "shift",
          tabBarHideOnKeyboard: Platform.OS === "android",
        }}
        detachInactiveScreens={false}
        lazy={false}
      >
        <Tab.Screen
          {...getTabProps("positions", "走行位置", "barchart", "AntDesign")}
          component={Top}
        />
        <Tab.Screen
          {...getTabProps("topMenu", "トップメニュー", "radio", "Ionicons")}
          component={MenuPage}
        />

        <Tab.Screen
          {...getTabProps(
            "information",
            "運行情報",
            "train",
            "Ionicons",
            areaInfo ? areaIconBadgeText : undefined,
            isInfo
          )}
          children={TNDView}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}