import { lazy, Suspense } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { ToastContainer } from 'react-toastify';

import s from './App.module.css';
import { IAppProps, IAppState } from './typescript/app/interfaces';

import PrivateRoute from './components/Routes/PrivateRoute/PrivateRoute';
import PublicRoute from './components/Routes/PublicRoute/PublicRoute';
import Loader from './components/Loader/Loader';

const Navigation = lazy(
  () =>
    import(
      './components/Navigation/Navigation' /* webpackChunkName: "Navigation" */
    ),
);

const Categories = lazy(
  () =>
    import(
      './components/Categories/Categories' /* webpackChunkName: "Categories" */
    ),
);

const Goods = lazy(
  () => import('./components/Goods/Goods' /* webpackChunkName: "Goods" */),
);

const DetailGood = lazy(
  () =>
    import(
      './components/Goods/DetailGood/DetailGood' /* webpackChunkName: "DetailGood" */
    ),
);

const Orders = lazy(
  () => import('./components/Orders/Orders' /* webpackChunkName: "Orders" */),
);

const DetailOrder = lazy(
  () =>
    import(
      './components/Orders/DetailOrder/DetailOrder' /* webpackChunkName: "DetailOrder" */
    ),
);

const Authorization = lazy(
  () =>
    import(
      './components/Authorization/Authorization' /* webpackChunkName: "AuthorizationPage" */
    ),
);

const SignInForm = lazy(
  () =>
    import(
      './components/Authorization/SignIn/SignIn' /* webpackChunkName: "SignInForm" */
    ),
);

const RegistrationForm = lazy(
  () =>
    import(
      './components/Authorization/Registration/RegistrationForm' /* webpackChunkName: "RegistrationForm" */
    ),
);

function App({ isLoading }: IAppProps) {
  return (
    <div className={s.appWrapper}>
      <Suspense fallback={<Loader />}>
        <BrowserRouter>
          <Switch>
            <Route path={'/authorization'}>
              <Authorization />
              <PublicRoute exact path={'/authorization/login'} restricted>
                <SignInForm />
              </PublicRoute>
              <PublicRoute
                exact
                path={'/authorization/registration'}
                restricted
              >
                <RegistrationForm />
              </PublicRoute>
            </Route>
            <PrivateRoute path="/">
              <Navigation />
            </PrivateRoute>
            <PrivateRoute exact path="/categories">
              <Navigation />
              <Categories />
            </PrivateRoute>
            <PrivateRoute exact path="/categories/goods/:name">
              <Navigation />
              <Goods />
            </PrivateRoute>
            <PrivateRoute exact path="/categories/goods/:name/:id">
              <Navigation />
              <DetailGood />
            </PrivateRoute>
            <PrivateRoute exact path="/orders">
              <Navigation />
              <Orders />
            </PrivateRoute>
            <PrivateRoute path="/orders/:id">
              <Navigation />
              <DetailOrder />
            </PrivateRoute>
          </Switch>
          {isLoading && <Loader />}
          <ToastContainer
            position="top-right"
            autoClose={3000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
          />
        </BrowserRouter>
      </Suspense>
    </div>
  );
}

const mapStateToProps = (state: IAppState) => ({
  isLoading: state.isLoading.flag,
});

export default connect(mapStateToProps)(App);