import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import {
  TextField,
  InputAdornment,
  Button,
  Card,
  CardActions,
  CardContent
} 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 (
    <Card variant="outlined">
      <CardContent>
        <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}
        />
      </CardContent>
      <CardActions>
        <Button variant="contained" color="primary" onClick={onLogin}>
          {t("Login.Label")}
        </Button>
      </CardActions>
    </Card>
  );
};

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

export default LoginComponent;