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

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

  return (
    <>
      <CardContent>
        <TextField
          sx={styles.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")}
          sx={styles.field}
          onChange={onChange("password")}
          value={credentials.password}
          onKeyDown={e => {
            if (e.key === "Enter") onLogin();
          }}
        />
      </CardContent>
      <CardActions sx={styles.actions}>
        <Button sx={styles.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;
