import React, { useContext } from "react";
import LoginComponent from "./LoginComponent";
import Button from "@material-ui/core/Button";
import { authenticate } from "../../../utils/identity";
import {
  ApplicationStateContext,
  ApplicationDispatchContext
} from "../../../state/ApplicationContexts";

const LoginContainer = () => {
  const state = useContext(ApplicationStateContext);
  const dispatchActions = useContext(ApplicationDispatchContext);

  const handleLogin = async () => {
    const { userName, password } = state.credentials;
    const token = await authenticate(userName, password);
    dispatchActions.onAuthorizationTokenChange(token);
  };

  return (
    <>
      <LoginComponent />
      <Button variant="contained" color="primary" onClick={handleLogin}>
        Login
      </Button>
    </>
  );
};

export default LoginContainer;