import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Platform, UIManager } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { UpdateAsync } from "./UpdateAsync.js";
import TNDView from "./ndView";
import { LogBox } from "react-native";
import { initIcon } from "./lib/initIcon";
import { FavoriteStationProvider } from "./stateBox/useFavoriteStation";
import { Top } from "./Top.js";
import { MenuPage } from "./MenuPage.js";
import { CurrentTrainProvider } from "./stateBox/useCurrentTrain.js";
import { useAreaInfo, AreaInfoProvider } from "./stateBox/useAreaInfo.js";
import { BusAndTrainDataProvider } from "./stateBox/useBusAndTrainData.js";
import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram.js";
import { SheetProvider } from "react-native-actions-sheet";
import "./components/ActionSheetComponents/sheets.js";
import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { DeviceOrientationChangeProvider } from "./stateBox/useDeviceOrientationChange.js";
LogBox.ignoreLogs([
  "ViewPropTypes will be removed",
  "ColorPropType will be removed",
]);
const Tab = createBottomTabNavigator();
if (Platform.OS === "android") {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

export default function App() {
  useEffect(() => UpdateAsync(), []);
  return (
    <DeviceOrientationChangeProvider>
      <SafeAreaProvider>
        <GestureHandlerRootView style={{ flex: 1 }}>
          <FavoriteStationProvider>
            <TrainDelayDataProvider>
              <CurrentTrainProvider>
                <AreaInfoProvider>
                  <AllTrainDiagramProvider>
                    <BusAndTrainDataProvider>
                      <SheetProvider>
                        <AppContainer />
                      </SheetProvider>
                    </BusAndTrainDataProvider>
                  </AllTrainDiagramProvider>
                </AreaInfoProvider>
              </CurrentTrainProvider>
            </TrainDelayDataProvider>
          </FavoriteStationProvider>
        </GestureHandlerRootView>
      </SafeAreaProvider>
    </DeviceOrientationChangeProvider>
  );
}
export function AppContainer() {
  const { areaInfo } = 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 ? "!" : undefined,
          }}
        >
          {(props) => <TNDView {...props} />}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}