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 env from "./env";
import { logImEXEvent } from "./firebase/firebase.utils";
import { client } from "./graphql/client";
import { persistor, store } from "./redux/store";
import "./translations/i18n";

console.log("Environment Variables Set:", env);

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: "tomato",
    accent: "yellow",
  },
};

export default class App extends React.Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     isReady: false,
  //   };
  // }

  async componentDidMount() {
    logImEXEvent("imexmobile_app_start");
    //this.setState({ isReady: true });
  }

  render() {
    // if (!this.state.isReady) {
    //   return <AppLoading />;
    // }

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