import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import { TextField, InputAdornment, Button } from "@material-ui/core";
import { AccountCircleOutlined } from "@material-ui/icons";
import PasswordField from "../../../components/common/inputs/PasswordField";
import { useTranslation } from "react-i18next";

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

const LoginComponent = ({ credentials, onChange, onLogin }) => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <div>
      <TextField
        className={classes.field}
        id="username"
        label={t("Login.Username")}
        onChange={onChange("userName")}
        value={credentials.userName}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AccountCircleOutlined />
            </InputAdornment>
          )
        }}
      />
      <br />
      <PasswordField
        id="password"
        label={t("Login.Password")}
        className={classes.field}
        onChange={onChange("password")}
        value={credentials.password}
      />
      <br />
      <Button variant="contained" color="primary" onClick={onLogin}>
        {t("Login.Label")}
      </Button>
    </div>
  );
};

LoginComponent.propTypes = {
  credentials: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  onLogin: PropTypes.func.isRequired
};

export default LoginComponent;