import {CalendarScreen} from '@pages/calendar/calendar';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {RootState} from '@redux/store';
import {useSelector} from 'react-redux';

export const CalendarTabName = 'Calendar';

export type CalendarStackNavigatorParamList = {
  Overview: undefined;
};

const CalendarStack =
  createNativeStackNavigator<CalendarStackNavigatorParamList>();

export type CalendarScreenNavigationProp =
  NativeStackNavigationProp<CalendarStackNavigatorParamList>;

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

  const headerStyle = {
    backgroundColor: currentTheme.backgroundDark400,
  };

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

  return (
    <CalendarStack.Navigator initialRouteName="Overview">
      <CalendarStack.Screen
        name="Overview"
        options={{
          title: lang.overview,
          headerShown: true,
          headerShadowVisible: false,
          headerStyle: headerStyle,
        }}
        component={CalendarScreen}
      />
    </CalendarStack.Navigator>
  );
}

export default CalendarTab;
