import React from "react"
import {
  View,
  StyleSheet,
  AsyncStorage,
  PermissionsAndroid,
  Platform,
} from "react-native"
import { NativeRouter, Route, Link, Switch } from "react-router-native"
import MapView from "react-native-maps"
import { WorkItem, WorkItemList } from "./WorkItem"
import { Activity } from "./Activity"
import { Home } from "./Home"
import { ARViewer } from "./ARViewer"
import { Login, Logout, ProtectedRoute, DefaultRoute } from "./Auth"

console.ignoredYellowBox = [
  // See https://github.com/facebook/react-native/issues/12981
  "Setting a timer",
  "<ViroSurface>",
]

export const ensurePermissions = (
  permissions,
  rationale,
  onSuccess,
  onError
) => {
  PermissionsAndroid.requestMultiple(permissions, rationale)
    .then((results) => {
      if (
        !Object.values(results).every(
          (grant) => grant === PermissionsAndroid.RESULTS.GRANTED
        )
      ) {
        return Promise.reject()
      }

      if (onSuccess) {
        onSuccess(results)
      }
    })
    .catch((error) => {
      if (onError) {
        onError()
      }
    })
}

export default class App extends React.Component {
  render() {
    return (
      <NativeRouter>
        <View style={{ width: "100%", height: "100%" }}>
          <Switch>
            <Route exact path="/login" component={Login} />
            <Route exact path="/logout" component={Logout} />
            <ProtectedRoute exact path="/home" component={Home} />
            <ProtectedRoute
              exact
              path="/arviewer"
              render={(props) => <ARViewer {...props} />}
            />
            <ProtectedRoute exact path="/activity" component={Activity} />
            <ProtectedRoute exact admin path="/workItem" component={WorkItem} />
            <ProtectedRoute
              exact
              admin
              path="/workItemList"
              component={WorkItemList}
            />
            <DefaultRoute redirect="/home" />
          </Switch>
        </View>
      </NativeRouter>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
  },
})