import React, { useContext } from "react";
import LoginComponent from "./LoginComponent";
import { authenticate } from "../../../utils/identity";
import {
  ApplicationStateContext,
  ApplicationDispatchContext
} from "../../../state/ApplicationContexts";

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

  const handleChange = prop => event => {
    dispatchActions.onCredentialsChange(prop, event.target.value);
  };

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

  return (
    <>
      <LoginComponent
        credentials={state.credentials}
        onChange={handleChange}
        onLogin={handleLogin}
      />
    </>
  );
};

export default LoginContainer;