import React from 'react'
import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRoute } from './Auth'
import { Home } from './Home'
import { Profile } from './Profile'
import { Users } from './Users'
import { HeaderButton, Column, Row, Image, Text, Box } from 'ui'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import logoImage from 'images/logo.png'
import { versionInfo } from './version'
import { sizeInfo } from 'ui/style'

export class App extends React.Component {
  render() {
    const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth

    return (
      <Column minHeight='100vh'>
        <Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
          <Box color='#FAFAFA' borderBottom={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
            <Row minWidth='100vw'>
              <Row.Item>
                <Image source={logoImage}
                  height={height}
                  margin={sizeInfo.headerMargin} />
              </Row.Item>
              <Row.Item grow>&nbsp;</Row.Item>
              <Row.Item>
                <HeaderButton icon='profile' size={height} />
                <HeaderButton icon='logout' size={height} />
              </Row.Item>
            </Row>
          </Box>
        </Column.Item>
        <Column.Item grow />
        <Column.Item>
          <Router basename='/'>
            <Switch>
              <Route path='/login' component={Login} />
              <Route path='/confirm-email' component={ConfirmEmail} />
              <Route path='/reset-password' component={ResetPassword} />
              <Route path='/forgot-password' component={ForgotPassword} />
              <ProtectedRoute path='/logout' component={Logout} />
              <ProtectedRoute path='/profile' component={Profile} />
              <ProtectedRoute roles={['administrator', 'normal']} path='/' component={Home} />
              <ProtectedRoute roles={['administrator']} path='/users' component={Users} />
              <Route component={Home} />{/* No Match Route */}
            </Switch>
          </Router>
        </Column.Item>
        <Column.Item grow />
        <Column.Item>
          <Box color='#FAFAFA' borderTop={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
            <Text tone='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
          </Box>
        </Column.Item>
      </Column>
    )
  }
}