import {Stack, useRouter} from "expo-router";
import {Text, TouchableOpacity, View} from "react-native";
import {iOS_HIGHLIGHT} from "@/app/index";

export default function RootLayout() {
  const router = useRouter();

  return (
    <>
      <Stack>
        <Stack.Screen name="index" />
        <Stack.Screen name="createComputer" options={{
          presentation: 'modal',
          title: 'Add a Computer',
          headerLeft: props => <Cancel />,
          headerRight: props =>
            <View>
              <TouchableOpacity
                onPress={(event) => {
                  //TODO: Save to DB

                  router.navigate('../');
                }}>
                <Text style={{
                  color: iOS_HIGHLIGHT,
                  fontWeight: 'bold',
                }}>Save</Text>
              </TouchableOpacity>
            </View>
        }} />
        <Stack.Screen name="createServer" options={{
          presentation: 'modal',
          title: 'Add a WoL Server',
          headerLeft: props => <Cancel />,
          headerRight: props =>
            <View>
              <TouchableOpacity
                onPress={(event) => {
                  //TODO: Save to DB

                  router.navigate('../');
                }}>
                <Text style={{
                  color: iOS_HIGHLIGHT,
                  fontWeight: 'bold',
                }}>Save</Text>
              </TouchableOpacity>
            </View>
        }} />
      </Stack>
    </>
  );
}

function Cancel() {
  const router = useRouter();
  return <View>
    <TouchableOpacity
      onPress={(event) => {
        router.navigate('../');
      }}>
      <Text style={{ color: 'red'}}>Cancel</Text>
    </TouchableOpacity>
  </View>
}