import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Platform, UIManager } from "react-native";
import { UpdateAsync } from "./UpdateAsync.js";
import { AS } from "./storageControl";
import TNDView from "./ndView";
import { LogBox } from "react-native";
import useInterval from "./lib/useInterval";
import { HeaderConfig } from "./lib/HeaderConfig";
import { initIcon } from "./lib/initIcon";
import {
  useFavoriteStation,
  FavoriteStationProvider,
} from "./stateBox/useFavoriteStation";
import { Top } from "./Top.js";
import { MenuPage } from "./MenuPage.js";
import {
  useCurrentTrain,
  CurrentTrainProvider,
} from "./stateBox/useCurrentTrain.js";
import { useAreaInfo, AreaInfoProvider } from "./stateBox/useAreaInfo.js";
import {
  useBusAndTrainData,
  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";
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 (
    <FavoriteStationProvider>
      <TrainDelayDataProvider>
        <CurrentTrainProvider>
          <AreaInfoProvider>
            <AllTrainDiagramProvider>
              <BusAndTrainDataProvider>
                <SheetProvider>
                  <AppContainer />
                </SheetProvider>
              </BusAndTrainDataProvider>
            </AllTrainDiagramProvider>
          </AreaInfoProvider>
        </CurrentTrainProvider>
      </TrainDelayDataProvider>
    </FavoriteStationProvider>
  );
}
export function AppContainer() {
  const { setBusAndTrainData } = useBusAndTrainData();
  useEffect(() => {
    AS.getItem("busAndTrain")
      .then((d) => {
        const returnData = JSON.parse(d);
        setBusAndTrainData(returnData);
      })
      .catch(() => {
        fetch(
          "https://script.google.com/macros/s/AKfycbw0UW6ZeCDgUYFRP0zxpc_Oqfy-91dBdbWv-cM8n3narKp14IyCd2wy5HW7taXcW7E/exec"
        )
          .then((d) => d.json())
          .then((d) => {
            setBusAndTrainData(d);
            AS.setItem("busAndTrain", JSON.stringify(d));
          });
      });
  }, []);

  const { areaInfo, setAreaInfo } = useAreaInfo();
  const getAreaData = () =>
    fetch(
      "https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
    )
      .then((d) => d.text())
      .then((d) => setAreaInfo(d));
  useEffect(getAreaData, []);
  useInterval(getAreaData, 60000); //60秒毎に全在線列車取得

  return (
    <NavigationContainer name="Root" style={{ flex: 1 }}>
      <Tab.Navigator
        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
      >
        <Tab.Screen
          name="login"
          options={{
            tabBarLabel: "位置情報",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("barchart", "AntDesign"),
          }}
        >
          {(props) => <Top {...props} />}
        </Tab.Screen>
        <Tab.Screen
          name="menuPage"
          options={{
            tabBarLabel: "リンク",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("ios-radio", "Ionicons"),
          }}
        >
          {(props) => <MenuPage {...props} />}
        </Tab.Screen>
        <Tab.Screen
          name="home"
          options={{
            tabBarLabel: "運行情報",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("md-train", "Ionicons"),
            tabBarBadge: areaInfo ? "!" : undefined,
          }}
        >
          {(props) => <TNDView {...props} />}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}