import {Center} from '@gluestack-ui/themed/build/components/Center';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {RootState} from '@redux/store';
import {Text} from 'react-native';
import {useSelector} from 'react-redux';

export const MapTabName = 'Map';

export type MapStackNavigatorParamList = {
  Overview: undefined;
};

const MapStack = createNativeStackNavigator<MapStackNavigatorParamList>();

export type MapScreenNavigationProp =
  NativeStackNavigationProp<MapStackNavigatorParamList>;

function MapTab() {
  const lang = useSelector((state: RootState) => state.appVariables.lang);

  //const navigation = useNavigation<MapScreenNavigationProp>();

  return (
    <MapStack.Navigator initialRouteName="Overview">
      <MapStack.Screen
        name="Overview"
        options={{
          title: lang.navigation.home.map,
          headerShown: true,
        }}
        component={MapScreen}
      />
    </MapStack.Navigator>
  );
}

function MapScreen() {
  return (
    <Center>
      <Text>Map</Text>
    </Center>
  );
}

export default MapTab;
