
import React, { useEffect, useContext, useState } from "react";
import { Routes, Route  } from "react-router-dom";
import { AuthContext } from "Context/Auth";
import { GlobalContext } from "Context/Global";

import PrivateRoute  from "./PrivateRoutes";
import PublicRoute from "./PublicRoutes";
import {PublicWrapper} from "Components/PublicWrapper";
import { NotFoundPage } from "Pages/404";
import {SnackBar} from "Components/SnackBar";
import { SessionExpiredModal } from "Components/SessionExpiredModal";

// generatePagesRoutes
import { MemberWrapper } from "Components/MemberWrapper";
import { AdminWrapper } from "Components/AdminWrapper";


import {
AddAdminCmsPage,
AddAdminEmailPage,
AddAdminPhotoPage,
AdminCmsListPage,
AdminEmailListPage,
AdminStripePricesListPage,
AdminStripeSubscriptionsListPage,
AdminStripeInvoicesListPageV2,
AdminPhotoListPage,
EditAdminCmsPage,
EditAdminEmailPage,
UserMagicLoginPage,
MagicLoginVerifyPage,
CustomAdminLoginPage,
CustomAdminSignUpPage,
CustomAdminProfilePage,
CustomPublicLoginPage,
CustomPublicSignUpPage,
CustomPublicProfilePage,
CustomMemberLoginPage,
CustomMemberSignUpPage,
CustomMemberProfilePage,
CustomAdminAdminDashboardPage,
AdminListDepartmentTablePage,
AdminAddDepartmentTablePage,
AdminEditDepartmentTablePage,
AdminViewDepartmentTablePage,
AdminListLocationTablePage,
AdminAddLocationTablePage,
AdminEditLocationTablePage,
AdminViewLocationTablePage,
AdminListItemsTablePage,
AdminAddItemsTablePage,
AdminEditItemsTablePage,
AdminViewItemsTablePage,
AdminListItemMovementHistoryTablePage,
AdminAddItemMovementHistoryTablePage,
AdminEditItemMovementHistoryTablePage,
AdminViewItemMovementHistoryTablePage,
AdminListUserTablePage,
AdminAddUserTablePage,
AdminEditUserTablePage,
AdminViewUserTablePage,
MemberForgotPage,
MemberResetPage,
MemberDashboardPage,
AdminForgotPage,
AdminResetPage,
AdminDashboardPage,
AdminUserListPage,
AddAdminUserPage,
AddAdminStripePricePage,
EditAdminUserPage,
EditAdminStripePricePage
} from "./LazyLoad";

export const DynamicWrapper = ({ isAuthenticated, role, children }) => {
  if (!isAuthenticated) {
    return <PublicWrapper>{children}</PublicWrapper>;
  }
  if (isAuthenticated) {
    
if (role === "member") {
    return <MemberWrapper>{children}</MemberWrapper>;
  }

if (role === "admin") {
    return <AdminWrapper>{children}</AdminWrapper>;
  }

  }
};

export const NotFound = ({ isAuthenticated, role }) => {
  if (!isAuthenticated) {
    return (
      <PublicWrapper>
        <NotFoundPage />
      </PublicWrapper>
    );
  }
  if (isAuthenticated) {
    
if (role === "member") {
  return (
    <MemberWrapper>
      <NotFoundPage />
    </MemberWrapper>
  );
}

if (role === "admin") {
  return (
    <AdminWrapper>
      <NotFoundPage />
    </AdminWrapper>
  );
}

  }
};


export default () => {
  const { state } = useContext(AuthContext);
  const {
    state: { isOpen },
    dispatch,
  } = useContext(GlobalContext);
  const [screenSize, setScreenSize] = useState(window.innerWidth);

  function setDimension(e) {
    if (e.currentTarget.innerWidth >= 1024) {
      toggleSideBar(true);
    } else toggleSideBar(false);
    setScreenSize(e.currentTarget.innerWidth);
  }

  // const toTop = () => {
  //   containerRef.current.scrollTo(0, 0);
  // };

  const toggleSideBar = (open) => {
    if (isOpen && screenSize < 1024) {
      dispatch({
        type: "OPEN_SIDEBAR",
        payload: { isOpen: open },
      });
    } else if (!isOpen && screenSize >= 1024) {
      dispatch({
        type: "OPEN_SIDEBAR",
        payload: { isOpen: open },
      });
    }
  };

  useEffect(() => {
    window.addEventListener("resize", setDimension);

    return () => {
      window.removeEventListener("resize", setDimension);
    };
  }, [screenSize]);

  return (
    <div
    onClick={() => {
      isOpen ? toggleSideBar(false) : null;
    }}
      className={`h-screen overflow-x-hidden bg-gradient-to-br from-[#FCF3F9] to-[#EAF8FB]`}
    >
      <Routes>
      
  <Route
  exact
  path="/admin/add-cms"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/add-cms"}
    element={
      <AdminWrapper>
      <AddAdminCmsPage />
      </AdminWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/add-email"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/add-email"}
    element={
      <AdminWrapper>
      <AddAdminEmailPage />
      </AdminWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/add-photo"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/add-photo"}
    element={
      <AdminWrapper>
      <AddAdminPhotoPage />
      </AdminWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/cms"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/cms"}
    element={
      <AdminWrapper>
      <AdminCmsListPage />
      </AdminWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/email"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/email"}
    element={
      <AdminWrapper>
      <AdminEmailListPage />
      </AdminWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/photo"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/photo"}
    element={
      <AdminWrapper>
      <AdminPhotoListPage />
      </AdminWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/edit-cms/:id"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/edit-cms/:id"}
    element={
      <AdminWrapper>
      <EditAdminCmsPage />
      </AdminWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/edit-email/:id"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/edit-email/:id"}
    element={
      <AdminWrapper>
      <EditAdminEmailPage />
      </AdminWrapper>
    }
    />
  }
  />
  
        <Route
        path="/magic-login/:role"
        element={
          <PublicRoute
            path="/magic-login/:role"
            element={
              <PublicWrapper>
                <UserMagicLoginPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/magic-login/verify"
        element={
          <PublicRoute
            path="/magic-login/verify"
            element={
              <PublicWrapper>
                <MagicLoginVerifyPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/admin/login"
        element={
          <PublicRoute
            path="/admin/login"
            element={
              <PublicWrapper>
                <CustomAdminLoginPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/admin/signup"
        element={
          <PublicRoute
            path="/admin/signup"
            element={
              <PublicWrapper>
                <CustomAdminSignUpPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
  <Route
  exact
  path="/admin/profile"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/profile"}
    element={
      <AdminWrapper>
      <CustomAdminProfilePage />
      </AdminWrapper>
    }
    />
  }
  />
  
        <Route
        path="/public/login"
        element={
          <PublicRoute
            path="/public/login"
            element={
              <PublicWrapper>
                <CustomPublicLoginPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/public/signup"
        element={
          <PublicRoute
            path="/public/signup"
            element={
              <PublicWrapper>
                <CustomPublicSignUpPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/public/profile"
        element={
          <PublicRoute
            path="/public/profile"
            element={
              <PublicWrapper>
                <CustomPublicProfilePage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/member/login"
        element={
          <PublicRoute
            path="/member/login"
            element={
              <PublicWrapper>
                <CustomMemberLoginPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/member/signup"
        element={
          <PublicRoute
            path="/member/signup"
            element={
              <PublicWrapper>
                <CustomMemberSignUpPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
  <Route
  exact
  path="/member/profile"
  element={
    <PrivateRoute
    access="member"
    path={"/member/profile"}
    element={
      <MemberWrapper>
      <CustomMemberProfilePage />
      </MemberWrapper>
    }
    />
  }
  />
  
  <Route
  exact
  path="/admin/dashboard"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/dashboard"}
    element={
      <AdminWrapper>
      <CustomAdminAdminDashboardPage />
      </AdminWrapper>
    }
    />
  }
  />
  
      <Route
      exact
      path="/admin/department"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/department"
        element={
          <AdminWrapper>
          <AdminListDepartmentTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/add-department"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/add-department"
        element={
          <AdminWrapper>
          <AdminAddDepartmentTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/edit-department/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/edit-department/:id"
        element={
          <AdminWrapper>
          <AdminEditDepartmentTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/view-department/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/view-department/:id"
        element={
          <AdminWrapper>
          <AdminViewDepartmentTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/location"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/location"
        element={
          <AdminWrapper>
          <AdminListLocationTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/add-location"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/add-location"
        element={
          <AdminWrapper>
          <AdminAddLocationTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/edit-location/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/edit-location/:id"
        element={
          <AdminWrapper>
          <AdminEditLocationTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/view-location/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/view-location/:id"
        element={
          <AdminWrapper>
          <AdminViewLocationTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/items"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/items"
        element={
          <AdminWrapper>
          <AdminListItemsTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/add-items"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/add-items"
        element={
          <AdminWrapper>
          <AdminAddItemsTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/edit-items/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/edit-items/:id"
        element={
          <AdminWrapper>
          <AdminEditItemsTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/view-items/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/view-items/:id"
        element={
          <AdminWrapper>
          <AdminViewItemsTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/item_movement_history"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/item_movement_history"
        element={
          <AdminWrapper>
          <AdminListItemMovementHistoryTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/add-item_movement_history"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/add-item_movement_history"
        element={
          <AdminWrapper>
          <AdminAddItemMovementHistoryTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/edit-item_movement_history/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/edit-item_movement_history/:id"
        element={
          <AdminWrapper>
          <AdminEditItemMovementHistoryTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/view-item_movement_history/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/view-item_movement_history/:id"
        element={
          <AdminWrapper>
          <AdminViewItemMovementHistoryTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/user"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/user"
        element={
          <AdminWrapper>
          <AdminListUserTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/add-user"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/add-user"
        element={
          <AdminWrapper>
          <AdminAddUserTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/edit-user/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/edit-user/:id"
        element={
          <AdminWrapper>
          <AdminEditUserTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/view-user/:id"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/view-user/:id"
        element={
          <AdminWrapper>
          <AdminViewUserTablePage />
          </AdminWrapper>
        }
        />
      }
      />
      
        <Route
        path="/member/forgot"
        element={
          <PublicRoute
            path="/member/forgot"
            element={
              <PublicWrapper>
                <MemberForgotPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/member/reset"
        element={
          <PublicRoute
            path="/member/reset"
            element={
              <PublicWrapper>
                <MemberResetPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
  <Route
  exact
  path="/member/dashboard"
  element={
    <PrivateRoute
    access="member"
    path={"/member/dashboard"}
    element={
      <MemberWrapper>
      <MemberDashboardPage />
      </MemberWrapper>
    }
    />
  }
  />
  
        <Route
        path="/admin/forgot"
        element={
          <PublicRoute
            path="/admin/forgot"
            element={
              <PublicWrapper>
                <AdminForgotPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
        <Route
        path="/admin/reset"
        element={
          <PublicRoute
            path="/admin/reset"
            element={
              <PublicWrapper>
                <AdminResetPage />
              </PublicWrapper>
            }
              />
              
        }
      />

        
  <Route
  exact
  path="/admin/dashboard"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/dashboard"}
    element={
      <AdminWrapper>
      <AdminDashboardPage />
      </AdminWrapper>
    }
    />
  }
  />
  
      <Route
      exact
      path="/admin/users"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/users"
        element={
          <AdminWrapper>
          <AdminUserListPage />
          </AdminWrapper>
        }
        />
      }
      />
      
      <Route
      exact
      path="/admin/add-user"
      element={
        <PrivateRoute
        access="admin"
        path="/admin/add-user"
        element={
          <AdminWrapper>
          <AddAdminUserPage />
          </AdminWrapper>
        }
        />
      }
      />
      
  <Route
  exact
  path="/admin/edit-user/:id"
  element={
    <PrivateRoute
    access="admin"
    path={"/admin/edit-user/:id"}
    element={
      <AdminWrapper>
      <EditAdminUserPage />
      </AdminWrapper>
    }
    />
  }
  />
  

        <Route
          path={"*"}
          element={<PublicRoute path={"*"} element={<NotFound {...state} />} />}
        />
      </Routes>
      <SessionExpiredModal />
      <SnackBar />
    </div>
  );
};
