import React, { Component } from 'react'
import PropTypes from 'prop-types'
// import asyncComponent from './components/AsyncComponent.js'
import IHEInvokeImageDisplay from './routes/IHEInvokeImageDisplay.js'
import ViewerRouting from './routes/ViewerRouting.js'
import StudyListRouting from './studylist/StudyListRouting.js'
import StandaloneRouting from './routes/StandaloneRouting.js'
import CallbackPage from './CallbackPage.js'
import { withRouter } from 'react-router'
import { Route, Switch } from 'react-router-dom'
import { connect } from 'react-redux'
import { ViewerbaseDragDropContext } from 'react-viewerbase'

import './OHIFStandaloneViewer.css'
import './variables.css'
import './theme-tide.css'

// Dynamic Import Routes (CodeSplitting)
// const IHEInvokeImageDisplay = asyncComponent(() =>
//   import('./routes/IHEInvokeImageDisplay.js')
// )
// const ViewerRouting = asyncComponent(() => import('./routes/ViewerRouting.js'))
// const StudyListRouting = asyncComponent(() =>
//   import('./studylist/StudyListRouting.js')
// )
// const StandaloneRouting = asyncComponent(() =>
//   import('./routes/StandaloneRouting.js')
// )
// const CallbackPage = asyncComponent(() => import('./CallbackPage.js'))
//

const reload = () => window.location.reload()

class OHIFStandaloneViewer extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    user: PropTypes.object,
  }

  componentDidMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      if (this.props.setContext) {
        this.props.setContext(window.location.pathname)
      }
    })
  }

  componentWillUnmount() {
    this.unlisten()
  }

  render() {
    const { user, userManager } = this.props

    const userNotLoggedIn = userManager && (!user || user.expired)
    if (userNotLoggedIn) {
      const pathname = this.props.location.pathname

      if (pathname !== '/callback') {
        sessionStorage.setItem('ohif-redirect-to', pathname)
      }

      return (
        <Switch>
          <Route exact path="/silent-refresh.html" onEnter={reload} />
          <Route exact path="/logout-redirect.html" onEnter={reload} />
          <Route
            path="/callback"
            render={() => <CallbackPage userManager={userManager} />}
          />
          <Route
            component={() => {
              userManager.signinRedirect()

              return null
            }}
          />
        </Switch>
      )
    }

    return (
      <Switch>
        <Route exact path="/silent-refresh.html" onEnter={reload} />
        <Route exact path="/logout-redirect.html" onEnter={reload} />
        <Route exact path="/studylist" component={StudyListRouting} />
        <Route exact path="/" component={StudyListRouting} />
        <Route exact path="/viewer" component={StandaloneRouting} />
        <Route path="/viewer/:studyInstanceUids" component={ViewerRouting} />
        <Route
          path="/study/:studyInstanceUid/series/:seriesInstanceUids"
          component={ViewerRouting}
        />
        <Route
          path="/IHEInvokeImageDisplay"
          component={IHEInvokeImageDisplay}
        />
        <Route render={() => <div> Sorry, this page does not exist. </div>} />
      </Switch>
    )
  }
}

const mapStateToProps = state => {
  return {
    user: state.oidc.user,
  }
}

const ConnectedOHIFStandaloneViewer = connect(
  mapStateToProps,
  null
)(OHIFStandaloneViewer)

export default ViewerbaseDragDropContext(
  withRouter(ConnectedOHIFStandaloneViewer)
)