import React, { Suspense, lazy, PureComponent } from 'react'
import { BrowserRouter, HashRouter, Switch, Route } from 'react-router-dom'

import platform from '@obsidians/platform'
import { LoadingScreen } from '@obsidians/ui-components'
import Auth from '@obsidians/auth'

const Router = platform.isDesktop ? HashRouter : BrowserRouter
const ReduxApp = lazy(() => import('./ReduxApp' /* webpackChunkName: "components" */))

export default class App extends PureComponent{
  static getDerivedStateFromError(error){
    console.log(error)
    return {
      hasError: true,
      error,
    }
  }
  render(){
    if (this?.state?.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      let error = '该错误暂无错误信息'
      if (this?.state?.error){
        const originError = this?.state?.error
        error = originError.stack || originError.message || originError?.toString()
      }
      return (<>
      <div style={{
      fontSize: '2rem',
      padding: '1rem 2rem',
      }}>Conflux Studio encountered some errors
      </div>
      <div style={{
      fontSize: '1rem',
      padding: '0 2rem 1rem',
      }}>Press Ctrl + R ( Windows / Linux ) or Command + R ( macOS ) to refresh this page.
      </div>
      <div style={{
        fontSize: '1rem',
        padding: '0 2rem 1rem',
        }}>If error persists, back up necessary data ( i.e. keypairs ), click Application - Clear All App Data and restart the application.
      </div>
      <div style={{
        fontSize: '1rem',
        padding: '0 2rem 1rem',
        }}>Submit a Github Issue with below error logs to help us find the root cause.
      </div>
      <div style={{
        fontSize: '1rem',
        padding: '0 2rem 1rem',
        whiteSpace: 'pre-wrap',
        color: 'rgba(233, 244, 255, .5)',
        }}>
        {error}
        </div>

      </>)
    }
    return(
    <Router>
      <Suspense fallback={<LoadingScreen />}>
        <Switch>
          <Route path='/callback' render={props => {
            Auth.callback(props)
            return <LoadingScreen text='Logging in...' />
          }}/>
          <Route component={ReduxApp} />
        </Switch>
      </Suspense>
    </Router>
  )
  }
}