import React, { useState } from "react";
import LoginCard from "./LoginCard";
import { blip } from "../../../utils";
import { useTranslation } from "react-i18next";
import { useTuitioClient } from "@flare/tuitio-client-react";

const LoginContainer = () => {
  const [credentials, setCredentials] = useState({
    userName: "",
    password: ""
  });

  const { t } = useTranslation();
  const { login } = useTuitioClient({
    onLoginFailed: () => blip.error(t("Login.IncorrectCredentials")),
    onLoginError: err => blip.error(err.message)
  });

  const handleChange = prop => event => {
    setCredentials(prev => ({ ...prev, [prop]: event.target.value }));
  };

  const handleLogin = () => {
    const { userName, password } = credentials;
    return login(userName, password);
  };

  return <LoginCard credentials={credentials} onChange={handleChange} onLogin={handleLogin} />;
};

export default LoginContainer;
