import React, { Component, Fragment } from 'react'
import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRoute, DefaultRoute } from './Auth'
import { Home } from './Home'
import { Profile } from './Profile'
import { Users } from './Users'
import { Teams } from './Teams'
import { System } from './System'
import { HeaderButton, HeaderText, Column, Row, 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, colorInfo } from 'ui/style'
import { api } from 'src/API'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'

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

  constructor(props) {
    super(props)
    this.state = {
      loggedInUser: api.loggedInUser
    }
  }

  componentDidMount() {
    api.addListener('login', this.handleUpdate)
    api.addListener('logout', this.handleUpdate)
  }

  componentWillUnmount() {
    api.removeListener('login', this.handleUpdate)
    api.removeListener('logout', this.handleUpdate)
  }

  @autobind
  handleUpdate() {
    this.setState({ loggedInUser: api.loggedInUser })
  }

  handleLogout() {
    // We have to use window here because App does not have history in it's props
    window.location.replace('/logout')
  }

  handleHome() {
    window.location.replace('/')
  }

  handleProfile() {
    window.location.replace('/profile')
  }

  @autobind
  handleChangeTitle(title) {
    this.setState({ title })
  }

  render() {
    const { loggedInUser } = this.state
    let headerButtonsRight = null
    let headerButtonsLeft = null

    if (loggedInUser) {
      headerButtonsLeft = (
        <Fragment>
          <HeaderButton image={logoImage} onClick={this.handleHome} />
          <HeaderText text={this.state.title} />
        </Fragment>
      )
      headerButtonsRight = (
        <Fragment>
          <HeaderButton icon='profile' onClick={this.handleProfile} />
          <HeaderButton icon='logout' onClick={this.handleLogout} />
        </Fragment>
      )
    }

    return (
      <Router basename='/'>
        <Column minHeight='100vh'>
          <Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
            <Box background={colorInfo.headerButtonBackground}
              borderBottom={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
              style={{ boxSizing: 'content' }}>
              <Row minWidth='100vw'>
                <Row.Item>{headerButtonsLeft}</Row.Item>
                <Row.Item grow />
                <Row.Item>{headerButtonsRight}</Row.Item>
              </Row>
            </Box>
          </Column.Item>
          <Switch>
            <Route exact path='/login' component={Login} />
            <Route exact path='/logout' component={Logout} />
            <Route exact path='/confirm-email' component={ConfirmEmail} />
            <Route exact path='/reset-password' component={ResetPassword} />
            <Route exact path='/forgot-password' component={ForgotPassword} />
            <ProtectedRoute exact path='/profile' render={props => (<Profile {...props} changeTitle={this.handleChangeTitle} />)} />
            <ProtectedRoute exact admin path='/users' render={props => (<Users {...props} changeTitle={this.handleChangeTitle} />)} />
            <ProtectedRoute exact admin path='/teams' render={props => (<Teams {...props} changeTitle={this.handleChangeTitle} />)} />
            <ProtectedRoute exact admin path='/system' render={props => (<System {...props} changeTitle={this.handleChangeTitle} />)} />
            <ProtectedRoute exact admin path='/home' render={props => (<Home {...props} changeTitle={this.handleChangeTitle} />)} />
            <DefaultRoute />
          </Switch>
          <Column.Item>
            <Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
              <Text color='dimmed' margin={sizeInfo.footerTextMargin}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
            </Box>
          </Column.Item>
        </Column>
      </Router>
    )
  }
}