import {BrowserRouter as Router,Link,Route} from 'react-router-dom';
import ReactDOM from 'react-dom';
import {lazy,Suspense} from 'react';

import './sass/main.scss';
const Login = lazy(()=>import(/*webpackChunkName: "main-login"*/'./login.jsx'));
const Auth = lazy(()=>import(/*webpackChunkName: "main-auth"*/'./auth.jsx'));
const Index = lazy(()=>import(/*webpackChunkName: "main-index"*/'./index.jsx'));
const Page = lazy(()=>import(/*webpackChunkName: "main-page"*/'./page.jsx'));
const Video = lazy(()=>import(/*webpackChunkName: "main-video"*/'./movie.jsx'));
const Zone = lazy(()=>import(/*webpackChunkName: "main-zone"*/'./zone.jsx'));
import {LoadSpin} from './load.jsx';
import './sass/main-router.scss';
import Firework from './firework.jsx';

let conf=$conf.router.main;

class Main extends Component{
    render(){
        return (
            <Router>
                <Firework />
                <Suspense fallback={<LoadSpin className='main-loading' />} >
                    <Route exact path='/' component={Index} />
                    <Route path='/dashboard' component={Auth} />
                    <Route exact strict path='/login' component={Login} />
                    <Route exact strict path='/post/:title' component={({match})=><Page title={match.params.title}/>}/>
                    <Route exact strict path='/video' component={()=><Video conf={conf} />} />
                    <Route exact strict path='/zone' component={Zone} />
                </Suspense>
            </Router>
        );
    }
}

ReactDOM.render(<Main />,document.getElementById('main'));