import React from "react";

import { Card, Form, Button, InputGroup } from "react-bootstrap";

import { styles, content } from "./LoginPageResources";
import { Formik } from "formik";
import * as yup from "yup";
const schema = yup.object({
email: yup
.string()
.email()
.required(),
password: yup
.string()
.required("No password provided.")
.min(6, "Password is too short - should be 6 chars minimum.")
.max(16, "Password is too long - should be 16 chars maximum.")
.matches(/[a-zA-Z]/, "Password can only contain Latin letters."),
});

const LoginForm = () => {

return (

<Formik
initialValues={{
email: "abc@gmail.com",
password: "abcdefghi",
}}
validationSchema={schema}
onSubmit={console.log}

>
{
console.log("umeshbhat eas ")
}
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<div style={styles.CardDiv}>
<Card style={styles.Card}>
<Card.Body style={styles.CardBody}>
<Form noValidate onSubmit={handleSubmit}>
<Form.Group
controlId="emailAddress">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text>
<i

className={

content.emailIconClass
}
/>
</InputGroup.Text>
 </InputGroup.Prepend>
<Form.Control
size="sm"
type="email"
placeholder={

content.emailPlaceholder
}

onChange={handleChange}
isValid={

touched.email &&
!
errors.email
}

value={values.email}
/>
{

console.log("XXXXXXXXXXXXXXXXXXXX",values)
}
</InputGroup>
<Form.Control.Feedback>
Looks good!
</Form.Control.Feedback>
</Form.Group>

<Form.Group controlId="password">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text>
<i

className={

content.passwordIconClass
}
/>
</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
size="sm"
type="password"
placeholder={

content.passwordPlaceholder
}
required
/>
</InputGroup>
</Form.Group>

<Form.Group
controlId="rememberEmail">
<Form.Check
custom
type="checkbox"
 label={content.checkboxLabel}
/>
</Form.Group>
<Button
block
variant="success"
type="submit"
style={styles.Button}
>
{content.buttonText}
</Button>
<div
style={{
textAlign: "center",
marginTop: "0.2rem",
}}
>
<a href="/">

{content.forgotPasswordText}
</a>
</div>
</Form>
</Card.Body>
</Card>
</div>
)}
</Formik>
);
}

export default LoginForm;