import {Plus} from "lucide-react-native";
import {useTheme} from "@react-navigation/native";
import {Platform, TouchableOpacity} from "react-native";
import {createNativeStackNavigator} from "@react-navigation/native-stack";

import ServerCardIn from "./ServerCardIn";
import ServerManager from "./ServerManager";

const Stack = createNativeStackNavigator();

export default function ServerManagerStack({navigation}) {
    const theme = useTheme();

    return (
        <Stack.Navigator>
            <Stack.Group screenOptions={{
                headerLargeTitle: true,
                headerBlurEffect: "regular",
                headerStyle: {
                    backgroundColor: theme.colors.background
                },
                headerTitleStyle: {
                    fontWeight: "bold"
                },
                headerLargeTitleStyle: {
                    fontWeight: "bold"
                }
            }}>
                <Stack.Screen name="server-listing"
                              component={ServerManager}
                              options={{
                                  title: "Servers",
                                  headerRight: () =>  Platform.OS === 'android' ? null : <TouchableOpacity onPress={() => navigation.navigate('add-server')}><Plus color={theme.colors.primary}/></TouchableOpacity>
                              }}/>

                <Stack.Screen name="server" options={{title: "Server", headerTransparent: true}} component={ServerCardIn}/>
            </Stack.Group>
        </Stack.Navigator>
    );
}