import { ApolloProvider } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons";
import AppLoading from "expo-app-loading";
import * as FileSystem from "expo-file-system";
import * as Font from "expo-font";
import React from "react";
import {
  SafeAreaView,
  StatusBar as rnStatusBar,
  StyleSheet,
} from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
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 { 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();
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
    await FileSystem.makeDirectoryAsync(
      FileSystem.documentDirectory + "photos"
    ).catch((e) => {
      console.log(e, "Directory already exists");
    });
  }

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

    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <ApolloProvider client={client}>
            <SafeAreaView style={{ flex: 1, backgroundColor: "dodgerblue" }}>
              <ScreenMainComponent />
            </SafeAreaView>
          </ApolloProvider>
        </PersistGate>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    paddingTop: Platform.OS === "android" ? rnStatusBar.currentHeight : 0,
  },
});