import React, { useReducer } from "react";
import AuthReducer, { initialState } from "./store/reducers/auth_reducer";
import * as ACTIONS from "./store/actions/actions";
import AuthContext from "./utils/contex";
import Routes from "./routes";
import Loader from "./component/Loader";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const ApplicationState = () => {
  const [stateAuthReducer, dispatchAuthReducer] = useReducer(
    AuthReducer,
    initialState()
  );

  const handleLogin = (profile) => {
    dispatchAuthReducer(ACTIONS.login(profile));
  };

  const handleLogout = () => {
    dispatchAuthReducer(ACTIONS.logout());
  };

  const theme = createMuiTheme();

  return (
    <ThemeProvider theme={theme}>
      <Loader />
      <AuthContext.Provider
        value={{
          ...stateAuthReducer,
          handleLogin,
          handleLogout,
        }}
      >
        <Routes />
      </AuthContext.Provider>
    </ThemeProvider>
  );
};
export default ApplicationState;