{{#if (includes examples "ai")}}
import "@/polyfills";
{{/if}}
{{#if (eq api "trpc")}}
import { queryClient } from "@/utils/trpc";
{{/if}}
{{#if (eq api "orpc")}}
import { queryClient } from "@/utils/orpc";
{{/if}}
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
{{else}}
  {{#unless (eq api "none")}}
import { QueryClientProvider } from "@tanstack/react-query";
  {{/unless}}
{{/if}}
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { useUnistyles } from "react-native-unistyles";

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: "(drawer)",
};

{{#if (eq backend "convex")}}
const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
  unsavedChangesWarning: false,
});
{{/if}}

export default function RootLayout() {
  const { theme } = useUnistyles();

  return (
    {{#if (eq backend "convex")}}
    <ConvexProvider client={convex}>
      <GestureHandlerRootView style=\{{ flex: 1 }}>
        <Stack
          screenOptions=\{{
            headerStyle: {
              backgroundColor: theme.colors.background,
            },
            headerTitleStyle: {
              color: theme.colors.foreground,
            },
            headerTintColor: theme.colors.foreground,
          }}
        >
          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
          <Stack.Screen
            name="modal"
            options=\{{ title: "Modal", presentation: "modal" }}
          />
        </Stack>
      </GestureHandlerRootView>
    </ConvexProvider>
    {{else}}
      {{#unless (eq api "none")}}
    <QueryClientProvider client={queryClient}>
      <GestureHandlerRootView style=\{{ flex: 1 }}>
        <Stack
          screenOptions=\{{
            headerStyle: {
              backgroundColor: theme.colors.background,
            },
            headerTitleStyle: {
              color: theme.colors.foreground,
            },
            headerTintColor: theme.colors.foreground,
          }}
        >
          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
          <Stack.Screen
            name="modal"
            options=\{{ title: "Modal", presentation: "modal" }}
          />
        </Stack>
      </GestureHandlerRootView>
    </QueryClientProvider>
      {{else}}
      <GestureHandlerRootView style=\{{ flex: 1 }}>
        <Stack
          screenOptions=\{{
            headerStyle: {
              backgroundColor: theme.colors.background,
            },
            headerTitleStyle: {
              color: theme.colors.foreground,
            },
            headerTintColor: theme.colors.foreground,
          }}
        >
          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
          <Stack.Screen
            name="modal"
            options=\{{ title: "Modal", presentation: "modal" }}
          />
        </Stack>
      </GestureHandlerRootView>
      {{/unless}}
    {{/if}}
  );
}