import { h, Component } from 'preact';
// import PropTypes from 'prop-types';
import { BrowserRouter, Route, Switch, Redirect, withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { history } from '../store'
import * as authActions from './auth.actions';

import Login from './login.component';
import Logout from './logout.component';
import Signup from './signup.component';

import { randint } from '../util/math'

class AuthRouter extends Component {
  render(){
    return (
      <BrowserRouter>
        <div>
          <div className="diamond"></div>
          <Route exact path='/' component={Login} />
          <Route exact path='/login' component={Login} />
          <Route exact path='/logout' component={Logout} />
          <Route exact path='/signup' component={Signup} />
          <Route path='/:module' component={props => {
            switch (props.location.pathname) {
              case '/login':
              case '/logout':
              case '/signup':
                return null;
            }
            this.props.actions.setReturnTo(props.location.pathname)
            return (
              <Redirect to="/login" />
            )
          }} />
        </div>
      </BrowserRouter>
    )
  }
  componentDidMount(){
    document.querySelector('.diamond').style.backgroundImage = 'linear-gradient(' + (randint(40)-5) + 'deg, #fde, #ffe)'
  }
}

class AuthGate extends Component {
  render(){
    const { auth, env, actions } = this.props
    if (env.production && !auth.initialized) {
      console.log('loading auth')
      return <div className='loading'>Loading</div>
    }
    if (env.development || auth.isAuthenticated) {
      if (auth.returnTo) {
        let { returnTo } = auth
        if (!returnTo || returnTo.match(/(login|logout|signup)/i)) {
          returnTo = '/'
        }
        console.log('history.push', returnTo)
        actions.setReturnTo(null)
        history.push(returnTo)
        return <div>Launching app</div>
      }
      return <div>{this.props.children}</div>
    }
    return <AuthRouter {...this.props} />
  }
  componentDidMount(){
    if (this.props.env.production) {
      this.props.actions.checkin()
    }
  }
}

const mapStateToProps = (state) => ({
  env: state.system.env,
  auth: state.auth,
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(authActions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(AuthGate);