import 'react-native-gesture-handler';
import 'expo-splash-screen';
import { QueryClientProvider } from '@tanstack/react-query';
import { NavigationContainer } from '@react-navigation/native';
import { queryClient } from 'src/utils/queryClient';
import * as Sentry from '@sentry/react-native';

import Route from './Route';
import { ConnectionProvider } from 'src/contexts/ConnectionContext';
import ConnectionBanner from 'src/components/ConnectionBanner/ConnectionBanner';
import { RegionProvider } from 'src/contexts/RegionContext';
import { ErrorProvider, useError } from 'src/contexts/ErrorContext';
import { useEffect } from 'react';
import { setupInterceptors } from 'src/utils/request';
import { ErrorModal } from 'src/components';
import { NotificationProvider } from 'src/contexts/NotificationContext';
import React from 'react';
import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';

const routingInstrumentation = new Sentry.ReactNavigationInstrumentation({
  enableTimeToInitialDisplay: true
});

Sentry.init({
  dsn: 'https://c9b37005f4be22a17a582603ebc17598@o4507781200543744.ingest.de.sentry.io/4507781253824592',
  integrations: [new Sentry.ReactNativeTracing({ routingInstrumentation })],
  debug: false,
  ignoreErrors: ['Network Error', 'ECONNABORTED', 'timeout of 10000ms exceeded']
});

const App = () => {
  async function setupNotificationChannels() {
    if (Platform.OS === 'android') {
      await Notifications.setNotificationChannelAsync('default', {
        name: 'default',
        importance: Notifications.AndroidImportance.MAX,
        vibrationPattern: [0, 250, 250, 250],
        lightColor: '#FF231F7C'
      });
    }
  }

  useEffect(() => {
    setupNotificationChannels();
  }, []);

  useEffect(() => {
    let notificationListener: any;
    let responseListener: any;

    const checkLastNotificationResponse = async () => {
      const lastNotificationResponse = await Notifications.getLastNotificationResponseAsync();
      if (lastNotificationResponse) {
        const data = lastNotificationResponse.notification.request.content.data;
        console.log('lastNotificationResponse', lastNotificationResponse.notification.request);
        console.log('dataLast', data);
      }
    };

    checkLastNotificationResponse();

    notificationListener = Notifications.addNotificationReceivedListener((notification) => {
      console.log('notification', notification.request);
    });

    responseListener = Notifications.addNotificationResponseReceivedListener((response) => {
      const data = response.notification.request.content.data;
      console.log('payload', response.notification.request.trigger?.payload);
      console.log('data', data);
    });

    return () => {
      if (notificationListener) notificationListener.remove();
      if (responseListener) responseListener.remove();
    };
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <NotificationProvider>
        <ErrorProvider>
          <InnerApp />
        </ErrorProvider>
      </NotificationProvider>
    </QueryClientProvider>
  );
};

const InnerApp = () => {
  const errorContext = useError();
  const navigation = React.useRef(null);

  useEffect(() => {
    setupInterceptors(errorContext);
  }, [errorContext]);

  return (
    <ConnectionProvider>
      <RegionProvider>
        <NavigationContainer
          ref={navigation}
          onReady={() => {
            routingInstrumentation.registerNavigationContainer(navigation);
          }}
        >
          <Route />
          <ConnectionBanner />
          <ErrorModal />
        </NavigationContainer>
      </RegionProvider>
    </ConnectionProvider>
  );
};

export default Sentry.wrap(App);