import CardButton from "@/components/CartButton";
import { useReactQueryDevTools } from "@dev-plugins/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
  router,
  Stack,
  useNavigationContainerRef,
  useRouter,
} from "expo-router";
import { useMMKVDevTools } from "@dev-plugins/react-native-mmkv";
import { storage } from "@/store/mmkv";
import * as Sentry from "@sentry/react-native";
import { Ionicons } from "@expo/vector-icons";
import { TouchableOpacity } from "react-native";
import React, { useEffect, useRef } from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { NavigationContainerRef } from "@react-navigation/native";

const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true, // Only in native builds, not in Expo Go.
});

Sentry.init({
  dsn: "https://8af0004917f7c8cfb06b2beac6fd3a66@o4507486642765824.ingest.de.sentry.io/4508981409808464",
  attachScreenshot: true,
  debug: false,
  tracesSampleRate: 1.0, // Adjust this value in production
  _experiments: {
    profilesSampleRate: 1.0, // Only during debugging, change to lower value in production
    replaysSessionSampleRate: 1.0, // Only during debugging, change to lower value in production
    replaysOnErrorSampleRate: 1,
  },
  integrations: [
    Sentry.mobileReplayIntegration({
      maskAllText: false,
      maskAllImages: true,
      maskAllVectors: false,
    }),
    Sentry.spotlightIntegration(),
    navigationIntegration,
  ],
  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
  // spotlight: __DEV__,
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
    },
  },
});

const RootLayout = () => {
  useReactQueryDevTools(queryClient);
  useMMKVDevTools({
    storage,
  });

  const router = useRouter();
  const navigationRef = useNavigationContainerRef();

  useEffect(() => {
    navigationIntegration.registerNavigationContainer(navigationRef);
  }, [navigationRef]);

  return (
    <QueryClientProvider client={queryClient}>
      <GestureHandlerRootView>
        <Stack>
          <Stack.Screen
            name="index"
            options={{
              title: "Products",
              headerShadowVisible: false,
              headerSearchBarOptions: {
                placeholder: "Search products",
                hideWhenScrolling: false,
                hideNavigationBar: false,
              },
              headerRight: () => <CardButton />,
            }}
          />
          <Stack.Screen name="product/[id]" options={{ title: "Product" }} />
          <Stack.Screen
            name="cart"
            options={{
              title: "Cart",
              presentation: "modal",
              headerLeft: () => (
                <TouchableOpacity onPress={() => router.back()}>
                  <Ionicons name="arrow-back" size={20} color="black" />
                </TouchableOpacity>
              ),
            }}
          />
        </Stack>
      </GestureHandlerRootView>
    </QueryClientProvider>
  );
};

export default Sentry.wrap(RootLayout);