import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
import Layout from "./layout";
import PrivateRoute from "./routes/PrivateRoute";
import Shop from "./pages/shop";
import Tutorial from "./pages/tutorial";
import Rule from "./pages/rule";
import About from "./pages/about";
import ProgressBar from "./common/ProgressBar";
import AuthLayout from "./layout/AuthLayout";
import Login from "./pages/login";
import Profile from "./pages/profile";
import { Toaster } from "react-hot-toast";
import { IsAuthenticated } from "./utils/auth";
import { HelmetProvider } from "react-helmet-async";
import InActivePayment from "./pages/inActivePayment";
import { useSelector } from "react-redux";
import { RootState } from "./redux/store";
import Page404 from "./pages/404";
import RedirectToHome from "./utils/redirect-to-home ";
// import LandingLayout from "./layout/LandingLayout";
// import Landing from "./pages/landing";

const App = () => {
  const { isPaymentGateway } = useSelector(
    (state: RootState) => state.isPaymentGatewayState
  );

  return (
    <Router basename="/">
      <HelmetProvider>
        <Toaster
          toastOptions={{
            className: "!bg-gray-800 !text-secondTheme !overflow-hidden",
          }}
        />
        <ProgressBar />
        <Routes>
          {/* <Route path="/" element={<LandingLayout />}>
            <Route index element={<Landing />}></Route>
            <Route path="/configs/:configs" element={<Navigate to='/shopping-config' />} />
          </Route> */}
          <Route path="/" element={<Layout />}>
            <Route index element={<Shop />} />
            <Route path="/configs/:configs" element={<RedirectToHome />} />
            <Route path="tutorial" element={<Tutorial />} />
            <Route path="rule" element={<Rule />} />
            <Route path="about" element={<About />} />
            <Route path="profile" element={<PrivateRoute />}>
              <Route index element={<Profile />} />
            </Route>
          </Route>
          <Route
            path="/login"
            element={
              IsAuthenticated() ? (
                <Navigate to="/profile" replace={true} />
              ) : (
                <AuthLayout />
              )
            }
          >
            <Route index element={<Login />} />
          </Route>
          <Route
            path="/noactive-payment"
            element={
              isPaymentGateway ? <Navigate to="/" /> : <InActivePayment />
            }
          />
          <Route path="*" element={<Page404 />} />
        </Routes>
      </HelmetProvider>
    </Router>
  );
};

export default App;