import { StatusBar } from "expo-status-bar";
import { style } from "./src/util/style";

import { PostsContainer } from "./src/components/PostsContainer";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NewPostContainer } from "./src/components/NewPostContainer";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

/**
 * RootStackParamList defines the possible screens in the app.
 * @typedef {object} RootStackParamList
 * @property {undefined} Home - Home screen.
 * @property {undefined} New - New post screen.
 */

type RootStackParamList = {
  Home: undefined;
  New: undefined;
};

/**
 * HomeScreenNavigationProp represents the navigation prop for the Home screen.
 * @typedef {object} HomeScreenNavigationProp
 * @property {Function} navigate - Function to navigate to a different screen.
 */

export type HomeScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  "Home"
>;

const Stack = createNativeStackNavigator();

/**
 * App function represents the main application component.
 * @returns {JSX.Element} - The rendered App component.
 */
export default function App(): JSX.Element {
  return (
    <>
      {/* Sets the status bar style */}
      <StatusBar style="light" />

      {/* Navigation container for the app */}
      <NavigationContainer>
        {/* Stack navigator for different screens */}
        <Stack.Navigator>
          {/* Home screen */}
          <Stack.Screen
            name="Home"
            component={PostsContainer}
            options={options}
          />

          {/* New post screen */}
          <Stack.Screen
            name="New"
            options={options}
            component={NewPostContainer}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

// Header options for the screens
const options = {
  headerStyle: style.header,
  headerTitleStyle: style.headerTitle,
  headerTintColor: "#fff",
};