import React, { useEffect } from "react";
import {
  createStackNavigator,
  TransitionPresets,
} from "@react-navigation/stack";
import { AS } from "./storageControl";
import TrainBase from "./trainbaseview";
import HowTo from "./howto";
import Menu from "./menu";
import Setting from "./components/settings.js";
import { useFavoriteStation } from "./stateBox/useFavoriteStation";
import { optionData } from "./lib/stackOption.js";
import CurrentTrainListView from "./components/CurrentTrainListView.js";
import AllTrainDiagramView from "./components/AllTrainDiagramView.js";
import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
const Stack = createStackNavigator();

export function MenuPage({ navigation }) {
  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
  const { getCurrentTrain } = useCurrentTrain();
  useEffect(() => {
    const unsubscribe = navigation.addListener("tabPress", (e) => {
      AS.getItem("favoriteStation")
        .then((d) => {
          const returnData = JSON.parse(d);
          if (favoriteStation.toString() != d) {
            setFavoriteStation(returnData);
          }
        })
        .catch((d) => console.log(d));
    });

    return unsubscribe;
  }, [navigation]);
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="menu"
        options={{
          headerShown: false,
          gestureEnabled: true,
          headerTransparent: true,
        }}
      >
        {(props) => <Menu {...props} getCurrentTrain={getCurrentTrain} />}
      </Stack.Screen>
      <Stack.Screen name="setting" options={optionData}>
        {(props) => <Setting {...props} />}
      </Stack.Screen>
      <Stack.Screen
        name="trainbase"
        options={{
          ...TransitionPresets.ModalPresentationIOS,
          cardOverlayEnabled: true,
          headerShown: false,
          gestureEnabled: true,
          headerTransparent: true,
          gestureResponseDistance: { vertical: 300 },
        }}
      >
        {(props) => <TrainBase {...props} />}
      </Stack.Screen>
      <Stack.Screen
        name="currentTrainIDList"
        options={{
          ...TransitionPresets.ModalPresentationIOS,
          cardOverlayEnabled: true,
          headerShown: false,
          gestureEnabled: true,
          headerTransparent: true,
          gestureResponseDistance: { vertical: 300 },
        }}
      >
        {(props) => <CurrentTrainListView {...props} />}
      </Stack.Screen>
      <Stack.Screen
        name="AllTrainIDList"
        options={{
          ...TransitionPresets.ModalPresentationIOS,
          cardOverlayEnabled: true,
          headerShown: false,
          headerTransparent: true,
        }}
      >
        {(props) => <AllTrainDiagramView {...props} />}
      </Stack.Screen>
      <Stack.Screen
        name="howto"
        options={{
          ...optionData,
        }}
      >
        {(props) => <HowTo {...props} />}
      </Stack.Screen>
    </Stack.Navigator>
  );
}