import { ThemeProvider } from "@material-ui/core/styles";
import theme from "./utils/ui/theme";
import SveltAppBar from "./parts/app-bar/AppBar";
import { BrowserRouter } from "react-router-dom";
import AppRoute from "./routes/index";
import { useSelector,useDispatch } from "react-redux";
import PublicRoutes from "./routes/public-routes"

import { useEffect } from 'react';
import {loadUser} from "./store/auth-action"
const App = () => {

  const dispatch = useDispatch() 
   const isAuth = useSelector((state:any) => state.auth.isAuthenticated)
  // const isAuth = false
  useEffect(() => {
    dispatch(loadUser());
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        {isAuth && (
          <div>
            <SveltAppBar />
            <AppRoute />
          </div>
        )}
        {!isAuth && <PublicRoutes />}
      </ThemeProvider>
    </BrowserRouter>
  );
};
export default App;