import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Link, Switch, Route } from 'react-router-dom';
import { Navbar, Nav, Container } from 'react-bootstrap';
import { UserContext, Login, Logout, OauthCallback, AuthenticationProvider } from './auth.js';
import { Flash } from './flash';
import { ThemeContext, ThemeProvider, ThemeSwitcher } from './theme.js';
import Main from './app';

function LoginNavigation(props) {
	if (!props.value.is_logged_in) {
		return <Nav.Link as={Link} to="/login">Login</Nav.Link>
	}
	return <>
		<Nav.Link as={Link} to="/logout">Logout [{props.value.username}]</Nav.Link>
	</>;
}

function Navigation() {
	return <ThemeContext.Consumer>
		{theme => (
		<Navbar bg={theme.bg} variant={theme.bg} expand="lg">
			<Navbar.Brand as={Link} to="/">Inventory</Navbar.Brand>
			<Navbar.Toggle aria-controls="navbar-content" />
			<Navbar.Collapse id="navbar-content">
				<Nav className="mr-auto">
					<Nav.Link as={Link} to="/">Home</Nav.Link>
					<UserContext.Consumer>
						{value => <LoginNavigation value={value} />}
					</UserContext.Consumer>
				</Nav>
				<ThemeSwitcher />
			</Navbar.Collapse>
		</Navbar>)}
	</ThemeContext.Consumer>;
}

function Router() {
	return <BrowserRouter>
		<Navigation />
		<Flash />
		<Container fluid>
			<Switch>
				<Route path="/login" component={Login} />
				<Route path="/logout" component={Logout} />
				<Route path="/oauth-callback" component={OauthCallback} />
				<Route path="/" component={Main} />
			</Switch>
		</Container>
	</BrowserRouter>;
}

function Root() {
	return <AuthenticationProvider>
		<ThemeProvider>
			<Router />
		</ThemeProvider>
	</AuthenticationProvider>;
}

ReactDOM.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>,
  document.getElementById('root')
);