import React, { Component } from "react"
import {
  Login,
  Logout,
  Parking,
  ResetPassword,
  ForgotPassword,
  ConfirmEmail,
  ProtectedRoute,
  DefaultRoute,
} from "./Auth"
import { Home } from "./Home"
import { Profile } from "./Profile"
import { Users } from "./Users"
import { Teams } from "./Teams"
import { Header, Column, Footer } from "ui"
import { BrowserRouter, Route, Switch } from "react-router-dom"
import { sizeInfo } from "ui/style"
import PropTypes from "prop-types"
import { versionInfo } from "./version"

export class App extends Component {
  static propTypes = {
    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
  }

  render() {
    return (
      <BrowserRouter>
        <Column minHeight="100vh">
          <Route
            path="/admin"
            render={(props) => (
              <Column.Item height={sizeInfo.headerHeight}>
                <Header
                  {...props}
                  left={[
                    { image: require("images/badge.png"), path: "/admin/home" },
                    { text: "Teams", path: "/admin/teams" },
                    { text: "Users", path: "/admin/users" },
                  ]}
                  right={[
                    { icon: "profile", path: "/admin/profile" },
                    { icon: "logout", path: "/logout" },
                  ]}
                />
              </Column.Item>
            )}
          />
          <Route
            path="/user"
            render={(props) => (
              <Column.Item height={sizeInfo.headerHeight}>
                <Header
                  {...props}
                  left={[
                    {
                      image: require("images/badge.png"),
                      path: "/user/profile",
                    },
                  ]}
                  right={[
                    { icon: "profile", path: "/user/profile" },
                    { icon: "logout", path: "/logout" },
                  ]}
                />
              </Column.Item>
            )}
          />
          <Switch>
            <Route exact path="/login" component={Login} />
            <Route exact path="/logout" component={Logout} />
            <Route exact path="/parking" component={Parking} />
            <Route exact path="/confirm-email" component={ConfirmEmail} />
            <Route exact path="/reset-password" component={ResetPassword} />
            <Route exact path="/forgot-password" component={ForgotPassword} />
            <ProtectedRoute exact path="/user/profile" component={Profile} />
            <ProtectedRoute
              exact
              admin
              path="/admin/profile"
              component={Profile}
            />
            <ProtectedRoute exact admin path="/admin/home" component={Home} />
            <ProtectedRoute exact admin path="/admin/teams" component={Teams} />
            <ProtectedRoute exact admin path="/admin/users" component={Users} />
            <DefaultRoute user="/user/profile" admin="/admin/home" />
          </Switch>
          <Route
            path="/(user|admin)"
            render={() => (
              <Column.Item>
                <Footer
                  text={
                    "v" + versionInfo.fullVersion + " " + versionInfo.copyright
                  }
                />
              </Column.Item>
            )}
          />
        </Column>
      </BrowserRouter>
    )
  }
}