import './App.css'
import { 
  MuiThemeProvider, 
  unstable_createMuiStrictModeTheme as createMuiTheme 
} from '@material-ui/core/styles'
import React, { useContext } from 'react'
import {
  HashRouter as Router,
  Redirect,
  Switch,
  Route,
  useRouteMatch
} from "react-router-dom";
import {
  CircularProgress,
  Container,
  CssBaseline,
  Paper,
  Typography
} from '@material-ui/core'
import {
  makeStyles
} from '@material-ui/core/styles'
import { useTranslation } from 'react-i18next'
import Header from './components/layout/Header'
import Home from './components/Home'
import RouteBoard from './components/RouteBoard'
import RouteEta from './components/RouteEta'
import Settings from './components/Settings'
import AppContext from './AppContext'
import Footer from './components/layout/Footer'

const PageSwitch = () => {
  const { path } = useRouteMatch()
  return (
    <Switch>
      <Route path={`${path}/route/:id/:panel?`}>
        <RouteEta />
      </Route>
      <Route path={`${path}/settings`}>
        <Settings />
      </Route>      
      <Route path={`${path}/search`}>
        <RouteBoard />
      </Route>
      <Route path={`${path}`}>
        <Home />
      </Route>
    </Switch>
  )
}

const App = () => { 
  const { routeList, stopList, stopMap } = useContext( AppContext )
  const { t } = useTranslation()
  const classes = useStyles()
  
  if ( routeList == null || stopList == null || stopMap == null ) {
    return (
      <Container maxWidth='xs' disableGutters className={classes.loadingContainer}>
        <CircularProgress size={40} />
        <br />
        <br />
        <Paper className={classes.loadingTextContainer} elevation={0}>
          { stopList == null ? 
              <>
                <Typography variant="subtitle2" align="center">{t('初始設定')}...</Typography>
                <Typography variant="subtitle2" align="center">{t('正在更新巴士路線資料')}...</Typography>
              </>      
          : <>{t('啟動中')}</>
          }
        </Paper>
      </Container>
    )
  } 

  return (
    <MuiThemeProvider theme={Theme}>
      <Container maxWidth='xs' disableGutters className={classes.container}>
        <Router>
          <Route exact path="/">
            <Redirect to="/zh/" />
          </Route>
          <Route path="/:lang">
            <CssBaseline />
            <Header />
            <PageSwitch />
            <Footer />
          </Route>
        </Router>
      </Container>
    </MuiThemeProvider>
  );
}
 
export default App;

const Theme = createMuiTheme({
  typography: {
    fontFamily: "Noto Sans TC, Chivo, sans-serif"
  },
  palette: {
    background: {
      default: "#ffff90" // yellow
    }
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        html: {
          userSelect: 'none'
        }
      }
    }
  }
})

const useStyles = makeStyles( theme => ({
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    height: '100vh'
  },
  loadingContainer: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh'
  }
}))