import * as React from 'react';
import { ToastComponent, AlertComponent } from 'amis';
import { Route, Switch, Redirect, BrowserRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
import { IMainStore } from '../stores';
import Login from '../pages/Login';
import AdminRoute from '../pages/admin';
import Editor from '../pages/Editor';
import Preview from '../pages/Preview';
import basename from '@/utils/basename';

export default observer(function ({ store }: { store: IMainStore }) {
    return (
        <BrowserRouter basename={basename}>
            <div className="routes-wrapper">
                <ToastComponent
                    key="toast"
                    position={'top-right'}
                    theme={store.theme}
                />
                <AlertComponent key="alert" theme={store.theme} />
                <Switch>
                    <Route path={`/login`} component={Login} />
                    <Route path={`/preview`} component={Preview} />
                    <Route path="/edit/:id" component={Editor} />
                    <Route path={''} component={AdminRoute} />
                </Switch>
            </div>
        </BrowserRouter>
    );
});