import { BrowserRouter, Route, Routes } from "react-router-dom"
import Dashboard from "./components/dashboard/Dashboard"
import Home from "./components/home/Home"
import Login from "./components/login/Login";
import Register from "./components/register/Register";

import { ToastContainer } from 'react-toastify';
import ProcessStepTwo from "./components/process/processStepTwo/ProcessStepTwo";
import ProcessStepOne from "./components/process/processStepOne/ProcessStepOne";

import DocView from "./components/view/DocView";
import SignDocument from "./components/client/SignDocument";

import Transactions from "./components/transactions/Transactions";
import ProtectedRoute from "./components/routes_helper/ProtectedRoute";

import { HashRouter } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux";
import { fetchUserDetails } from "./store/slices/userSlice";
import { AppDispatch, RootState } from "./store/store";
import { useEffect, useLayoutEffect } from "react";

import Setting from "./components/setting/Setting";
import Accounts from "./components/accounts/Accounts";
import Account from "./components/accounts/Account";
import TransactionView from "./components/transactions/TransactionView";
import AccountTransactionWrapper from "./components/AccountTransactionWrapper";
import SigningOrderDiagram from "./SigningOrderDiagram ";

const App = () => {
  return (
    <BrowserRouter>
      {/* <HashRouter> */}
      <ToastContainer />

      <Routes>

        <Route element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        }>
          <Route path="/" element={<Home />} />
          <Route path="/templates" element={<Home />} />

          <Route element={<AccountTransactionWrapper />}>
            <Route path="/accounts" element={<Accounts />} />
            <Route path="/accounts/:accountId/transactions" element={<Account />} />
            <Route path="/accounts/:accountId/transactions/:transactionId" element={<TransactionView />} />
            <Route path="/transactions/:filterParam" element={<Transactions />} />
          </Route>

          <Route path="/s/:page1" element={<Setting />} />
        </Route>




        <Route path="/process-step-one/:accountId/:transactionId" element={
          <ProtectedRoute>
            <ProcessStepOne />
          </ProtectedRoute>
        } />

        <Route path="/process-step-two/:accountId/:transactionId" element={
          <ProtectedRoute>
            <ProcessStepTwo />
          </ProtectedRoute>
        } />

        {/* Links work wothout Login */}
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/sign/:recipientId" element={<SignDocument />} />
        <Route path="/view" element={<DocView />} />

        <Route path="/SigningOrderDiagram" element={<SigningOrderDiagram />} />

        {/* Links work wothout Login */}
      </Routes>

      {/* </HashRouter> */}
    </BrowserRouter>
  )
}

export default App