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

const LoginContainer = () => {
  const state = useContext(ApplicationStateContext);
  const dispatchActions = useContext(ApplicationDispatchContext);
  const { error } = useToast();
  const { t } = useTranslation();

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

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

    try {
      const response = await authenticate(userName, password);
      if (response.status === "SUCCESS") {
        dispatchActions.onAuthorizationTokenChange(response.token);
      } else if (response.status === "BAD_CREDENTIALS") {
        error(t("Login.IncorrectCredentials"));
      }
    } catch (err) {
      error(err.message);
    }
  };

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

export default LoginContainer;