import { createStackNavigator, HeaderTitle } from "@react-navigation/stack";
import React from "react";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useHeaderOptions } from "../hooks/useHeaderOptions";
import { ReportUnMatchButton } from "../ui/ReportUnMatchButton";
import { MatchesStackParamList } from "./MatchesStack/MatchesNav";
import { MatchesScreen } from "./MatchesStack/MatchesScreen";
import { MessagesScreen } from "./MatchesStack/MessagesScreen";
import { ViewCardScreen } from "./ViewCardScreen";

const Stack = createStackNavigator<MatchesStackParamList>();

export const MatchesStack: React.FC = () => {
  return (
    <Stack.Navigator
      screenOptions={useHeaderOptions()}
      initialRouteName="matchy"
    >
      <Stack.Screen
        options={{ headerShown: false }}
        name="matchy"
        component={MatchesScreen}
      />
      <Stack.Screen
        options={{ title: "Card" }}
        name="viewCard"
        component={ViewCardScreen}
      />
      <Stack.Screen
        options={({ route, navigation }) => ({
          headerTitle: (props) => (
            <TouchableOpacity
              onPress={() =>
                navigation.navigate("viewCard", { id: route.params.id })
              }
            >
              <HeaderTitle {...props}>{route.params.displayName}</HeaderTitle>
            </TouchableOpacity>
          ),
          headerRight: ReportUnMatchButton,
        })}
        name="messages"
        component={MessagesScreen}
      />
    </Stack.Navigator>
  );
};