import {
  Navigate,
  useRoutes,
  createHashRouter,
  RouterProvider,
} from "react-router-dom";
import loadable from "@loadable/component";

// layouts
const DashboardLayout = loadable(() => import("./layouts/dashboard"));
const SimpleLayout = loadable(() => import("./layouts/simple"));
const LoginLayout = loadable(() => import("./layouts/login"));

// pages
const Login = loadable(() => import("./pages/login"));
const Home = loadable(() => import("./pages/home"));
const Signup = loadable(() => import("./pages/signup"));
const BlogPage = loadable(() => import("./pages/BlogPage"));
const UserPage = loadable(() => import("./pages/UserPage"));
const LoginPage = loadable(() => import("./pages/LoginPage"));
const Page404 = loadable(() => import("./pages/Page404"));
const ProductsPage = loadable(() => import("./pages/ProductsPage"));
const DashboardAppPage = loadable(() => import("./pages/DashboardAppPage"));
const Organization = loadable(() => import("./pages/organization"));

// const SimpleLayout = loadable(() => import());
// const SimpleLayout = loadable(() => import());
// const SimpleLayout = loadable(() => import());
// const SimpleLayout = loadable(() => import());

// import DashboardLayout from "./layouts/dashboard";
// import SimpleLayout from "./layouts/simple";
// import LoginLayout from './layouts/login'
// pages
// import Login from "./pages/login";
// import Home from "./pages/home";
// import Signup from "./pages/signup";

// import BlogPage from "./pages/BlogPage";
// import UserPage from "./pages/UserPage";
// import LoginPage from "./pages/LoginPage";
// import Page404 from "./pages/Page404";
// import ProductsPage from "./pages/ProductsPage";
// import DashboardAppPage from "./pages/DashboardAppPage";

const router = createHashRouter([
  {
    path: "/login",
    element: <LoginLayout />,
    children: [
      { element: <Navigate to="/login/user" />, index: true },
      { path: "user", element: <Login /> },
      { path: "signup", element: <Signup /> },
    ],
  },

  {
    path: "/dashboard",
    element: <DashboardLayout />,
    children: [
      { element: <Navigate to="/dashboard/app" />, index: true },
      { path: "app", element: <DashboardAppPage /> },
      { path: "user", element: <UserPage /> },
      { path: "products", element: <ProductsPage /> },
      { path: "blog", element: <BlogPage /> },
      {
        path: "home",
        element: <Home />,
      },
      {
        path: "organization",
        element: <Organization />,
      },
    ],
  },
  //   {
  //     path: "login",
  //     element: <LoginPage />,
  //   },
  {
    element: <SimpleLayout />,
    children: [
      { element: <Navigate to="/dashboard/app" />, index: true },
      { path: "404", element: <Page404 /> },
      { path: "*", element: <Navigate to="/404" /> },
    ],
  },
  {
    path: "*",
    element: <Navigate to="/404" replace />,
  },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}
