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.fullVersion} {versionInfo.copyright}
              </Text>
            </Box>
          </Column.Item>
        </Column>
      </Router>
    )
  }
}