import React, {useRef} from 'react';
import {Button, View} from 'react-native';
import * as Sentry from '@sentry/react-native';
import {NavigationContainer} from '@react-navigation/native';

export const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true,
});

const configureSentry = () => {
  Sentry.init({
    dsn: 'YOUR_DSN',
    tracesSampleRate: 0.2,
    environment: 'development',
    appHangTimeoutInterval: 10,
    enableUserInteractionTracing: true,
    replaysSessionSampleRate: 0.0, // No need to record full session
    replaysOnErrorSampleRate: 1.0, // Record a replay for 100% of error sessions
    integrations: [
      Sentry.mobileReplayIntegration({
        maskAllText: false,
        maskAllImages: false,
        maskAllVectors: false,
      }),
      Sentry.reactNativeTracingIntegration(),
      navigationIntegration,
    ],
  });
};

configureSentry();

function App(): React.JSX.Element {
  const containerRef = useRef(null);

  return (
    <NavigationContainer
      ref={containerRef}
      onReady={() => {
        navigationIntegration.registerNavigationContainer(containerRef);
      }}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Button
          title="Test Crash"
          // Having sentry-label will affect the sentry replay session
          // with sentry-label, iOS not able to record replay session
          // Android totally not able to record replay session
          sentry-label="DISABLE_REPLAY"
          onPress={() => {
            throw new Error('Test Crash New App Replay');
          }}
        />
      </View>
    </NavigationContainer>
  );
}

export default Sentry.wrap(App);