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

import {Map} from '@pages/map/map';

import {EventID} from '@components/map/types';
import EventPage from '@pages/event/EventPage';

export const MapTabName = 'Map';

export type MapStackNavigatorParamList = {
  Overview: undefined;
  Event: {eventID: EventID};
  EventStore: {eventID: EventID};
};

const MapStack = createNativeStackNavigator<MapStackNavigatorParamList>();

export type MapScreenNavigationProp =
  NativeStackNavigationProp<MapStackNavigatorParamList>;

function MapTab() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.navigation.home.map,
  );
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  const headerStyle = {
    backgroundColor: currentTheme.backgroundDark400,
  };
  //const navigation = useNavigation<MapScreenNavigationProp>();

  return (
    <MapStack.Navigator initialRouteName="Overview">
      <MapStack.Screen
        name="Overview"
        options={{headerShown: false}}
        component={MapScreen}
      />
      <MapStack.Screen
        name="Event"
        options={{
          animation: 'slide_from_right',
          title: 'lang',
          headerShown: true,
          headerStyle: headerStyle,
          headerShadowVisible: false,
          headerTitleAlign: 'center',
        }}
        component={EventPage}
      />
      <MapStack.Screen
        name="EventStore"
        options={{headerShown: true}}
        component={EventPage}
      />
    </MapStack.Navigator>
  );
}

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

export default MapTab;
