import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { Navigate, useRoutes } from 'react-router';
import DashboardLayout from '../components/DashboardLayout';
import { Dispatch } from '../models/store';
import NotFound from './NotFound';
import HomePage from './Home'



const AppRouters: React.FC = () => {
  const dispatch = useDispatch<Dispatch>();

  useEffect(() => {
    (window as any).__dispatch__ = dispatch;
    return () => {
      delete (window as any).__dispatch__;
    }
  }, [dispatch]);


  let element = useRoutes([
    { path: '/', element: <Navigate to="/mgr/home" /> },
    {
      path: '/mgr', element: <DashboardLayout />, children: [
        { path: 'home', element: <HomePage /> },
        { path: 'real', element: <HomePage /> },
        { path: '*', element: <NotFound /> },
      ]
    },
    { path: '*', element: <NotFound /> },
  ]);

  return element;
}

export default AppRouters