import React, { useContext } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { TextField, InputAdornment } from "@material-ui/core";
import { AccountCircleOutlined } from "@material-ui/icons";
import PasswordField from "../../../components/common/inputs/PasswordField";
import {
  ApplicationStateContext,
  ApplicationDispatchContext
} from "../../../state/ApplicationContexts";
import { useTranslation } from "react-i18next";

const useStyles = makeStyles(theme => ({
  field: {
    margin: theme.spacing(1),
    width: "20ch"
  }
}));

const LoginComponent = () => {
  const classes = useStyles();
  const { t } = useTranslation();

  const state = useContext(ApplicationStateContext);
  const dispatchActions = useContext(ApplicationDispatchContext);

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

  return (
    <div>
      <TextField
        className={classes.field}
        id="username"
        label={t("Login.Username")}
        onChange={handleChange("userName")}
        value={state.credentials.userName}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AccountCircleOutlined />
            </InputAdornment>
          )
        }}
      />
      <br />
      <PasswordField
        id="password"
        label={t("Login.Password")}
        className={classes.field}
        onChange={handleChange("password")}
        value={state.credentials.password}
      />
    </div>
  );
};

export default LoginComponent;