import React from 'react';
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {ToastContainer} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import onlyNotAutorize from "../src/components/hoc/onlyNotRegistration";
import onlyAutorizedUsers from "../src/components/hoc/onlyAutorizedUsers";
import Loadable from 'react-loadable';
// import {
//     parfumeFilterComposition,
//     makeUpFilterComposition,
//     nailsFilterComposition,
//     hairFilterComposition
// } from "./constants/filters";

import Loading from "./components/loadingPage/loadingPage";
import ParfumPage from './pages/parfumPage/parfumPage';
// const ParfumPage = Loadable({
//     loader: () => import('./pages/parfumPage/parfumPage'),
//     loading: Loading,
//     timeout: 10000
// });
const StartPage = Loadable({
    loader: () => import('./pages/startPage/startPage'),
    loading: Loading,
    timeout: 10000
});
const Cabinet = Loadable({
    loader: () => import('./pages/cabinet/cabinet'),
    loading: Loading,
    timeout: 10000
});
const SimpleGoodsPage = Loadable({
   loader: () => import("./pages/simpleGoodsPage/simpleGoodsPage"),
   loading: Loading,
   timeout: 10000
});

const Auth = Loadable({
    loader: () => import("./pages/auth/auth"),
    loading: Loading,
    timeout: 10000
});

const Registration = Loadable({
    loader: () => import("./pages/registration/registration"),
    loading: Loading,
    timeout: 10000
});

class App extends React.Component{

    render() {
        return(
            <Router>
                <div>
                    <ToastContainer
                        position={"bottom-center"}
                    />
                    <Switch>
                        <Route exact path={"/"} component={StartPage}/>
                        <Route
                            exact
                            path={"/parfumes/:number"}
                            component={props => (<ParfumPage/>)}
                        />
                        <Route
                            exact
                            path={"/makeup/:number"}
                            component={props => <ParfumPage/>}
                        />
                        <Route
                            exact
                            path={"/nails/:number"}
                            component={props => <ParfumPage/>}
                        />
                        <Route
                            exact
                            path={"/hair/:number"}
                            component={props => <ParfumPage/>}
                        />
                        <Route
                            exact
                            path={"/auth"}
                            component={onlyNotAutorize(Auth)}
                        />
                        <Route
                            exact
                            path={"/signUp"}
                            component={onlyNotAutorize(Registration)}
                        />
                        <Route
                            exact
                            path={"/product/:id"}
                            component={SimpleGoodsPage}
                        />
                        <Route
                            exact
                            path={"/cabinet"}
                            component={onlyAutorizedUsers(Cabinet)}
                        />
                    </Switch>
                </div>
            </Router>
        );
    }
}


export default App;
