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 { useFavoriteStation } from "./stateBox/useFavoriteStation";
import { optionData } from "./lib/stackOption.js";
import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
const Stack = createStackNavigator();
export const Top = ({ navigation }) => {
  const webview = useRef();
  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
  const { getCurrentTrain } = useCurrentTrain();

  //地図用
  const [mapsStationData, setMapsStationData] = useState(undefined);

  useEffect(() => {
    getStationList2().then(setMapsStationData);
  }, []);

  useEffect(() => {
    const unsubscribe = navigation.addListener("tabLongPress", (e) => {
      navigation.navigate("favoriteList");
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Apps"
        options={{
          headerShown: false,
          gestureEnabled: true,
          headerTransparent: true,
        }}
      >
        {(props) => (
          <Apps
            {...props}
            webview={webview}
            stationData={mapsStationData}
            getCurrentTrain={getCurrentTrain}
          />
        )}
      </Stack.Screen>
      <Stack.Screen
        name="trainbase"
        options={{
          title: "トレインビジョン",
          gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
        }}
      >
        {(props) => <TrainBase {...props} />}
      </Stack.Screen>
      <Stack.Screen
        name="howto"
        options={{
          ...optionData,
        }}
      >
        {(props) => <HowTo {...props} />}
      </Stack.Screen>
      <Stack.Screen name="news" options={optionData}>
        {(props) => <News {...props} />}
      </Stack.Screen>
      <Stack.Screen name="trainMenu" options={optionData}>
        {(props) => (
          <TrainMenu
            {...props}
            webview={webview}
            stationData={mapsStationData}
          />
        )}
      </Stack.Screen>
      <Stack.Screen
        name="favoriteList"
        options={{ ...optionData, gestureEnabled: false }}
      >
        {(props) => (
          <FavoriteList
            {...props}
            webview={webview}
            stationData={mapsStationData}
          />
        )}
      </Stack.Screen>
    </Stack.Navigator>
  );
};