import { ApolloProvider } from "@apollo/client";
import React from "react";
import { DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import * as Sentry from "sentry-expo";
import ScreenMainComponent from "./components/screen-main/screen-main.component";
import { logImEXEvent } from "./firebase/firebase.analytics";
import { client } from "./graphql/client";
import { persistor, store } from "./redux/store";
import "./translations/i18n";
import "intl";
import "intl/locale-data/jsonp/en";

Sentry.init({
  dsn: "https://8d6c3de1940a4e4f8b81cf4d2150bdea@o492140.ingest.sentry.io/5558869",
  enableInExpoDevelopment: true,
  // debug: true, // Sentry will try to print out useful debugging information if something goes wrong with sending an event. Set this to `false` in production.
});

Sentry.Native.nativeCrash();

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "dodgerblue",
    accent: "tomato",
  },
};

export default class App extends React.Component {
  async componentDidMount() {
    logImEXEvent("imexmobile_app_start");
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <ApolloProvider client={client}>
            <PaperProvider theme={theme}>
              <ScreenMainComponent />
            </PaperProvider>
          </ApolloProvider>
        </PersistGate>
      </Provider>
    );
  }
}