//@flow
import React, { Component } from "react";
import { StatusBar } from "react-native";
import { ThemeContext, getTheme } from "react-native-material-ui";
import rxjsconfig from "recompose/rxjsObservableConfig";
import setObservableConfig from "recompose/setObservableConfig";
import { NativeRouter, Route, Redirect, AndroidBackButton, Switch } from "react-router-native";
import Nav from "./pages/Nav";
import FoodItemDetail from "./pages/FoodItemDetail";
import PlaceDetail from "./pages/PlaceDetail";
import CreateFoodItem from "./pages/CreateFoodItem";
import AuthManager from "./AuthManager";
import LoginPage from "./pages/LoginPage";
import LandingPage from "./pages/LandingPage";
import ZipcodePage from "./pages/ZipcodePage";
import { AppContainer } from "./components/AppContainer";

import theme from "./ui-theme";

setObservableConfig(rxjsconfig);

export default class App extends Component {
	static displayName = "App";

	render() {
		return (
			<NativeRouter>
				<AndroidBackButton>
					<ThemeContext.Provider value={getTheme(theme)}>
						<AppContainer>
							<StatusBar backgroundColor={theme.statusBarColor} />
							<Redirect from="/" to="/landing" />
							<Switch>
								<Route path="/landing" component={LandingPage} />
								<Route path="/list/:type" component={Nav} />
								<Route path="/foodItem/:id" component={FoodItemDetail} />
								<Route path="/place/:id" component={PlaceDetail} />
								<Route path="/login" component={LoginPage} />
								<Route path="/logout" component={LoginPage} />
								<Route path="/zipcode" component={ZipcodePage} />
								<Route
									path="/createFoodItem"
									render={props => {
										if (!AuthManager.isLoggedIn()) {
											const search = props.location.search + "&" || "?";
											return <Redirect to={`/login${search}`} push />;
										}
										return <CreateFoodItem />;
									}}
								/>
							</Switch>
						</AppContainer>
					</ThemeContext.Provider>
				</AndroidBackButton>
			</NativeRouter>
		);
	}
}