import React, { useCallback, useEffect, useRef } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { useNavigation } from "@react-navigation/native";
import { useColorScheme } from "react-native";
import Apps from "./components/Apps";
import TrainBase from "./components/trainbaseview";
import HowTo from "./howto";
import News from "./components/news";
import TrainMenu from "./components/trainMenu";
import { FavoriteList } from "./components/FavoriteList";
import { optionData } from "./lib/stackOption";
import { useCurrentTrain } from "./stateBox/useCurrentTrain";
import { useTrainMenu } from "./stateBox/useTrainMenu";
import { AS } from "./storageControl";
import { news } from "./config/newsUpdate";
import { Linking, Platform } from "react-native";
import GeneralWebView from "./GeneralWebView";
import { StationDiagramView } from "@/components/StationDiagram/StationDiagramView";
import { positionsStackNavRef } from "./lib/rootNavigation";
const Stack = createStackNavigator();
export const Top = () => {
  const { webview } = useCurrentTrain();
  const { navigate, addListener, isFocused } = useNavigation<any>();
  const isDark = useColorScheme() === "dark";
  const bgColor = isDark ? "#1c1c1e" : "#ffffff";

  //地図用
  const { mapSwitch } = useTrainMenu();
  const mapSwitchRef = useRef(mapSwitch);
  useEffect(() => {
    mapSwitchRef.current = mapSwitch;
  }, [mapSwitch]);

  const goToFavoriteList = () =>
    navigate("positions", { screen: "favoriteList" });

  useEffect(() => {
    const unsubscribe = addListener("tabLongPress", goToFavoriteList);
    return unsubscribe;
  }, []);

  const stackNavRef = positionsStackNavRef;

  const goToTrainMenu = useCallback((e: any) => {
    if (Platform.OS === "web") {
      Linking.openURL("https://train.jr-shikoku.co.jp/");
      setTimeout(() => navigate("topMenu", { screen: "menu" }), 100);
      return;
    }
    if (!isFocused()) return;
    const stackNav = stackNavRef.current;
    if (stackNav && stackNav.getState()?.index > 0) {
      e.preventDefault();
      stackNav.goBack();
      return;
    }
    if (mapSwitchRef.current == "true")
      navigate("positions", { screen: "trainMenu" });
    else webview.current?.injectJavaScript(`AccordionClassEvent()`);
    return;
  }, [isFocused, navigate, webview]);

  useEffect(() => {
    const unsubscribe = addListener("tabPress", goToTrainMenu);
    return unsubscribe;
  }, [addListener, goToTrainMenu]);

  return (
    <Stack.Navigator
      id={null}
      screenOptions={{ cardStyle: { backgroundColor: bgColor } }}
      screenListeners={({ navigation: stackNav }) => {
        stackNavRef.current = stackNav;
        return {};
      }}
    >
      <Stack.Screen
        name="Apps"
        options={{
          headerShown: false,
          gestureEnabled: true,
          headerTransparent: true,
          detachPreviousScreen: false,
        }}
        component={Apps}
      />
      <Stack.Screen
        name="trainbase"
        options={{ ...optionData }}
        component={TrainBase}
      />
      <Stack.Screen
        name="stDiagram"
        options={{ ...optionData, gestureEnabled: false }}
        component={StationDiagramView}
      />
      <Stack.Screen name="howto" options={optionData} component={HowTo} />
      <Stack.Screen
        name="generalWebView"
        options={optionData}
        component={GeneralWebView}
      />
      <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>
  );
};