import React, { Suspense, lazy } from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from '@/serviceWorker';
import { Provider } from "mobx-react";
import { configure } from 'mobx';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
import { createHashHistory } from "history";
// import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
// import { createBrowserHistory } from "history";
import AppStore from "@/stores/AppStore";

import ScrollToTop from '@/components/ScrollToTop';

// import Home from '@/views/Home';
// import MyOrders from '@/views/MyOrders';
import OrderDetail from '@/views/OrderDetail';
// import CityIndex from "@/views/CityIndex";
// import TourIndex from "@/views/TourIndex";
// import InfoDetail from "@/views/InfoDetail";
import BookingView from "@/views/BookingView";
import BookTravelerDetail from "@/views/BookTravelerDetail";
// import BookSelectCountry from "@/views/BookSelectCountry";
// import Thanks from "@/views/Thanks";

import '@/index.css';

const Home = lazy(() => import('@/views/Home'));
const MyOrders = lazy(() => import('@/views/MyOrders'));
// const OrderDetail = lazy(() => import('@/views/OrderDetail'));
const CityIndex = lazy(() => import("@/views/CityIndex"));
const TourIndex = lazy(() => import("@/views/TourIndex"));
const InfoDetail = lazy(() => import("@/views/InfoDetail"));
// const BookingView = lazy(() => import("@/views/BookingView"));
// const BookTravelerDetail = lazy(() => import("@/views/BookTravelerDetail"));
const BookSelectCountry = lazy(() => import("@/views/BookSelectCountry"));
const Thanks = lazy(() => import("@/views/Thanks"));
const Search = lazy(() => import("@/views/Search"));


configure({ enforceActions: "observed" });
const history = createHashHistory();
// const history = createBrowserHistory();
const appStore = new AppStore(history);

const NoMatch = ({ location }) => (
    <div>
        <h3>Sorry, Page not found! </h3>
        <Link to="/">Return to Home</Link>
    </div>
)

const Loading = (
    <div className="lds-ripple">
        <div></div>
        <div></div>
    </div>
)
const AppRouter = () => {
    return (
        <Router>
            <ScrollToTop />
            <Suspense fallback={Loading}>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/account" component={MyOrders} />
                    <Route exact path="/order/:coli/:orderId" component={OrderDetail} />
                    <Route exact path="/tours/:city" component={CityIndex} />
                    <Route exact path="/tours/:city/:tourId" component={TourIndex} />
                    <Route exact path="/tours/:city/:tourId/book" component={BookingView} />
                    <Route exact path="/tours/:city/:tourId/book/travelers" component={BookTravelerDetail} />
                    <Route exact path="/tours/:city/:tourId/:detailcat" component={InfoDetail} />
                    <Route exact path="/book" component={BookingView} />
                    <Route exact path="/book/travelers" component={BookTravelerDetail} />
                    <Route exact path="/book/select-country" component={BookSelectCountry} />
                    <Route exact path="/book/paynow" component={Thanks} />
                    <Route exact path="/search" component={Search} />
                    <Route component={NoMatch} />
                </Switch>
            </Suspense>
        </Router>
    )
}

ReactDOM.render(
    <Provider store={appStore} >
        <AppRouter />
    </Provider>
    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
