/* eslint-disable no-template-curly-in-string */
import React, { Component } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { setLocale } from 'yup';
import './AuthForm.css';
import { Form, Col, Button, Container } from 'react-bootstrap';
import FormInput from "../../../components/Form/Input";

setLocale({
    mixed: {
        default: 'Não é válido',
        required: '${path} é necessário',
    },
    number: {
        min: 'Deve ser maior que ${min}',
    },
    string: {
        min: 'Mínimo de ${min} caracteres'
    }
});

export default class AuthForm extends Component {
    schema = Yup.object().shape({
        name: Yup.string().min(3).required().label("Nome"),
        email: Yup.string().email().required().label("Email"),
        password: Yup.string().min(6).required().label("Senha"),
        passwordConfirmation: Yup.string().required().label("Confirmação de Senha")
            .oneOf([Yup.ref('password')], 'Senhas devem coincidir')
    })

    render() {
        return (
            <Formik
                initialValues={{
                    name: '',
                    email: '',
                    password: '',
                    passwordConfirmation: ''
                }}
                validationSchema={this.schema}
                onSubmit={values => {
                    // same shape as initial values
                    console.log(values);
                }}
            >
                {({ handleSubmit,
                    isSubmitting,
                    ...formik }) => (
                        <Form onSubmit={handleSubmit}>
                            <Container style={{ width: "100%", margin: "auto" }}>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={8} controlId="validationName">
                                        <Form.Label>Nome</Form.Label>
                                        <FormInput feedback="Belo Nome!" formik={formik}>
                                            <Form.Control
                                                type="text"
                                                name="name"
                                                placeholder="Seu Nome"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                </Form.Row>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={8} controlId="validationEmail">
                                        <Form.Label>Email</Form.Label>
                                        <FormInput feedback="Email Bonito!" formik={formik}>
                                            <Form.Control
                                                type="email"
                                                name="email"
                                                placeholder="Seu melhor Email"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                </Form.Row>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={4} controlId="validationPassword">
                                        <Form.Label>Senha</Form.Label>
                                        <FormInput feedback="Deveras Seguro!" formik={formik}>
                                            <Form.Control
                                                type="password"
                                                name="password"
                                                placeholder="Sua senha"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                    <Form.Group as={Col} md={4} controlId="validationPasswordConfirmation">
                                        <Form.Label>Confirmar Senha</Form.Label>
                                        <FormInput feedback="Já vi isso antes!" formik={formik}>
                                            <Form.Control
                                                type="password"
                                                name="passwordConfirmation"
                                                placeholder="Sua senha - O Retorno"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                </Form.Row>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={8} controlId="authSubmissionButton">
                                        <Button block size="lg" variant="success" type="submit">Enviar</Button>
                                    </Form.Group>
                                </Form.Row>
                            </Container>
                        </Form>
                    )}
            </Formik>
        )
    }
}