import React, { useEffect, useRef, useState } from "react";
import {
  createStackNavigator,
  TransitionPresets,
} from "@react-navigation/stack";
import { getStationList2 } from "./lib/getStationList2";
import Apps from "./Apps";
import TrainBase from "./trainbaseview";
import HowTo from "./howto";
import News from "./components/news.js";
import TrainMenu from "./components/trainMenu.js";
import FavoriteList from "./components/FavoriteList.js";
import { optionData } from "./lib/stackOption.js";
import { useNavigation } from "@react-navigation/native";
import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
import { AS } from "./storageControl.js";
import { useTrainMenu } from "./stateBox/useTrainMenu";
const Stack = createStackNavigator();
export const Top = ({ navigationRef }) => {
  const { webview } = useCurrentTrain();
  const navigation = useNavigation();
  const { navigate, addListener } = navigation;

  //地図用
  const { setMapsStationData, injectJavaScript, setInjectJavaScript } =
    useTrainMenu();

  useEffect(() => {
    getStationList2().then(setMapsStationData);
  }, []);
  const [mapSwitch, setMapSwitch] = React.useState("false");
  const ASCore = ({ k, s, d }) =>
    AS.getItem(k)
      .then((d) => (d ? s(d) : AS.setItem(k, d)))
      .catch(() => AS.setItem(k, d));
  useEffect(() => {
    //地図スイッチ
    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
  }, []);

  useEffect(() => {
    const unsubscribe = addListener("tabLongPress", () =>
      navigate("favoriteList")
    );
    return unsubscribe;
  }, [navigation]);
  useEffect(() => {
    const unsubscribe = navigation.addListener("tabPress", () => {
      if (navigationRef.current?.getCurrentRoute().name == "Apps") {
        if (mapSwitch == "true") {
          navigation.navigate("trainMenu");
          setInjectJavaScript("");
        } else {
          webview.current?.injectJavaScript(`AccordionClassEvent()`);
        }
      } else {
        if (mapSwitch == "true") {
          if (injectJavaScript) {
            webview.current?.injectJavaScript(injectJavaScript);
            setInjectJavaScript("");
          }
        }
        navigation.navigate("Apps");
      }
    });
    return unsubscribe;
  }, [navigation, mapSwitch, injectJavaScript]);

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Apps"
        options={{
          headerShown: false,
          gestureEnabled: true,
          headerTransparent: true,
        }}
        component={Apps}
      />
      <Stack.Screen
        name="trainbase"
        options={{
          title: "トレインビジョン",
          gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
        }}
        component={TrainBase}
      />

      <Stack.Screen name="howto" options={optionData} component={HowTo} />
      <Stack.Screen name="news" options={optionData} component={News} />

      <Stack.Screen
        name="trainMenu"
        options={optionData}
        component={TrainMenu}
      />

      <Stack.Screen
        name="favoriteList"
        options={{ ...optionData, gestureEnabled: false }}
        component={FavoriteList}
      />
    </Stack.Navigator>
  );
};