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";

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>
      <CurrentTrainProvider>
        <AreaInfoProvider>
          <BusAndTrainDataProvider>
            <AppContainer />
          </BusAndTrainDataProvider>
        </AreaInfoProvider>
      </CurrentTrainProvider>
    </FavoriteStationProvider>
  );
}
export function AppContainer() {
  const { setFavoriteStation } = useFavoriteStation();
  useEffect(() => {
    AS.getItem("favoriteStation")
      .then((d) => {
        const returnData = JSON.parse(d);
        setFavoriteStation(returnData);
      })
      .catch((d) => console.log(d));
  }, []);
  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 { setCurrentTrain, setCurrentTrainLoading } = useCurrentTrain();

  const getCurrentTrain = () =>
    fetch(
      "https://script.google.com/macros/s/AKfycby9Y2-Bm75J_WkbZimi7iS8v5r9wMa9wtzpdwES9sOGF4i6HIYEJOM60W6gM1gXzt1o/exec",
      HeaderConfig
    )
      .then((response) => response.json())
      .then((d) =>
        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
      )
      .then((d) => {
        setCurrentTrain(d);
        setCurrentTrainLoading("success");
      })
      .catch(() => {
        console.log("えらー");
        setCurrentTrainLoading("error");
      });

  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得

  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得

  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 detachInactiveScreens={false}>
        <Tab.Screen
          name="login"
          options={{
            tabBarLabel: "位置情報",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("barchart", "AntDesign"),
          }}
        >
          {(props) => <Top {...props} getCurrentTrain={getCurrentTrain} />}
        </Tab.Screen>
        <Tab.Screen
          name="menuPage"
          options={{
            tabBarLabel: "リンク",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("ios-radio", "Ionicons"),
          }}
        >
          {(props) => <MenuPage {...props} getCurrentTrain={getCurrentTrain} />}
        </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>
  );
}