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 ZhsyPage from './Zhsy';
import SyglPage from './Sygl';
import ZhscPage from './Zhsc';
import ZhgwPage from './Zhgw';
import YhfwPage from './Yhfw';

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/sygl" /> },
    {
      path: '/mgr', element: <DashboardLayout />, children: [
        { path: 'zhsy', element: <ZhsyPage /> },
        { path: 'sygl', element: <SyglPage /> },
        { path: 'zhsc', element: <ZhscPage /> },
        { path: 'zhgw', element: <ZhgwPage /> },
        { path: 'yhfw', element: <YhfwPage /> },

        { path: '*', element: <NotFound /> },
      ]
    },
    { path: '*', element: <NotFound /> },
  ]);

  return element;
};

export default AppRouters