import { useLayout } from '@hooks/useLayout';
import { useRouterTransition } from '@hooks/useRouterTransition';
import BlankLayout from '@layouts/BlankLayout';
import LayoutWrapper from '@layouts/components/layout-wrapper';
import HeaderLayout from '@layouts/HeaderLayout';
import HorizontalLayout from '@src/layouts/HorizontalLayout';
import VerticalLayout from '@src/layouts/VerticalLayout';
import { lazy, Suspense, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  BrowserRouter as AppRouter,
  Redirect,
  Route,
  Switch
} from 'react-router-dom';
import * as Actions from '../modules/account/login/actions/authAction';
import { Routes } from './routes';

const Router = () => {
  const [layout, setLayout] = useLayout();
  const [transition, setTransition] = useRouterTransition();
  const { isLogin } = useSelector(state => state.authState);
  // const isLogin = true;
  const dispatch = useDispatch();

  useEffect(() => {
    // console.log('isLogin>>>>>>>>', isLogin);
    if (!isLogin) {
      dispatch(Actions.check.request());
    }
  }, [isLogin]);

  const DefaultLayout =
    layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout';

  const Layouts = {
    BlankLayout,
    VerticalLayout,
    HorizontalLayout,
    HeaderLayout
  };

  const currentActiveItem = null;

  const LayoutRoutesAndPaths = layout => {
    const LayoutRoutes = [];
    const LayoutPaths = [];

    if (Routes) {
      Routes.filter(route => {
        if (
          route.layout === layout ||
          (route.layout === undefined && DefaultLayout === layout)
        ) {
          LayoutRoutes.push(route);
          LayoutPaths.push(route.path);
        }
      });
    }

    return { LayoutRoutes, LayoutPaths };
  };

  const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));

  const Error = lazy(() => import('@src/views/Error'));

  const FinalRoute = props => {
    const route = props.route;
    let action, resource;

    if (route.meta) {
      action = route.meta.action ? route.meta.action : null;
      resource = route.meta.resource ? route.meta.resource : null;
    }

    if (isLogin === false && !route.meta?.authRoute) {
      return <Redirect to='/account/login' />;
    } else {
      return <route.component {...props} />;
    }
  };

  const ResolveRoutes = () => {
    return Object.keys(Layouts).map((layout, index) => {
      const LayoutTag = Layouts[layout];

      const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
      const routerProps = {};

      return (
        <Route path={LayoutPaths} key={index}>
          <LayoutTag
            routerProps={routerProps}
            layout={layout}
            setLayout={setLayout}
            transition={transition}
            setTransition={setTransition}
            currentActiveItem={currentActiveItem}
          >
            <Switch>
              {LayoutRoutes.map(route => {
                return (
                  <Route
                    key={route.path}
                    path={route.path}
                    exact={route.exact === true}
                    render={props => {
                      Object.assign(routerProps, {
                        ...props,
                        meta: route.meta
                      });

                      return (
                        <Suspense fallback={null}>
                          <LayoutWrapper
                            layout={DefaultLayout}
                            transition={transition}
                            setTransition={setTransition}
                            {...(route.appLayout
                              ? {
                                  appLayout: route.appLayout
                                }
                              : {})}
                            {...(route.meta
                              ? {
                                  routeMeta: route.meta
                                }
                              : {})}
                            {...(route.className
                              ? {
                                  wrapperClass: route.className
                                }
                              : {})}
                          >
                            <FinalRoute route={route} {...props} />
                          </LayoutWrapper>
                        </Suspense>
                      );
                    }}
                  />
                );
              })}
            </Switch>
          </LayoutTag>
        </Route>
      );
    });
  };

  return (
    <AppRouter basename={process.env.REACT_APP_BASENAME}>
      <Switch>
        <Route
          exact
          path='/'
          render={() => {
            return <Redirect to='/main/dashboard' />;
          }}
        />

        <Route
          exact
          path='/not-authorized'
          render={props => (
            <Layouts.BlankLayout>
              <NotAuthorized />
            </Layouts.BlankLayout>
          )}
        />
        {ResolveRoutes()}

        <Route path='*' component={Error} />
      </Switch>
    </AppRouter>
  );
};

export default Router;