import "antd/dist/antd.css";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css";
import { Admin } from "./pages/admin";
import { Auth } from "./pages/auth";
import { getGlobalConf } from "./store/globalConfSlice";
import { useAppSelector } from "./store/hooks";
import { loadLoginState, loginSelector } from "./store/loginSlice";

function LoginSwitch() {
  const login = useSelector(loginSelector);
  if (login.login) {
    return <Admin />;
  } else {
    return <div>not login</div>;
  }
}

function App() {
  const dispatch = useDispatch();
  const globalConf = useAppSelector((state) => state.globalConf);
  useEffect(() => {
    dispatch(getGlobalConf());
    dispatch(loadLoginState());
  }, [dispatch]);
  return (
    <>
      {globalConf.loaded && (
        <Router basename="/bison">
          <Switch>
            <Route path="/auth/:code">
              <Auth />
            </Route>
            <Route path="/admin/">
              <LoginSwitch />
            </Route>
          </Switch>
        </Router>
      )}
    </>
  );
}

export default App;