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

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

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

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

export default LoginContainer;