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

const useStyles = makeStyles(styles);

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

  return (
    <>
      <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
          className={classes.onRight}
          variant="contained"
          color="primary"
          onClick={onLogin}
        >
          {t("Login.Label")}
        </Button>
      </CardActions>
    </>
  );
};

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

export default LoginComponent;