import React from 'react'
import * as Yup from 'yup';
import { useFormik, Form, FormikProvider } from 'formik';

import {
    Box, Button, FormControlLabel, Checkbox,
    Stack, TextField, FormGroup,
} from '@mui/material';


export function Candidato(props) {

    const CandidatoSchema = Yup.object().shape({
        nombres:
            Yup.string()
                .min(2, 'Demasiado corto!')
                .max(50, 'Demasiado largo!')
                .required("Ingresa un nombre válido"),
        apellidos:
            Yup.string()
                .required("Ingresa un apellido válido")
                .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
        mail:
            Yup.string()
                .email("Correo no valido")
                .required("Ingrea un puesto válido"),
        sendmail:
            Yup.bool()
                .required('Ingresa un nivel educativo válido'),
        nombrepuesto:
            Yup.string('Ingresa un valor válido')
                .required('Ingresa un nombre válido'),
        nombreEmpresa:
            Yup.string('Ingresa un valor válido')
                .required('Ingresa un nombre válido'),
    });

    let { handleNext, handleBack, password, setPassword } = props

    const formik = useFormik({
        initialValues: {
            nombres: password.nombres,
            apellidos: password.apellidos,
            sendmail: password.sendmail,
            mail : password.mail,
            nombrepuesto: password.nombrepuesto,
            nombreEmpresa: password.nombreEmpresa,
        },
        onSubmit: (fields) => {
            setPassword({ ...password, ...fields })
            handleNext()
        },
        validationSchema: CandidatoSchema,
    });

    const { errors, touched, handleSubmit, getFieldProps } = formik;

    return (
        <FormikProvider style={{ padding: 25 }} value={formik}>
            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                <Stack spacing={3}>
                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                        <TextField
                            label="Nombre"
                            fullWidth
                            {...getFieldProps('nombres')}
                            error={Boolean(touched.nombres && errors.nombres)}
                            helperText={touched.nombres && errors.nombres}
                        />

                        <TextField
                            label="Apellidos"
                            fullWidth
                            {...getFieldProps('apellidos')}
                            error={Boolean(touched.apellidos && errors.apellidos)}
                            helperText={touched.apellidos && errors.apellidos}
                        />
                    </Stack>

                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                        <TextField
                            fullWidth
                            type="email"
                            label="Correo Electronico"
                            {...getFieldProps('mail')}
                            error={Boolean(touched.mail && errors.mail)}
                            helperText={touched.mail && errors.mail}
                        />
                        <FormGroup>

                            <FormControlLabel
                                control={
                                    <Checkbox
                                        {...getFieldProps('sendmail')}
                                        defaultChecked
                                        color="default"
                                    />
                                }
                                label="Enviar Correo"
                            />
                        </FormGroup>
                    </Stack>



                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
                        <TextField
                            fullWidth
                            type="text"
                            label="Puesto"
                            {...getFieldProps('nombrepuesto')}
                            error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
                            helperText={touched.nombrepuesto && errors.nombrepuesto}
                        />
                        <TextField
                            fullWidth
                            type="text"
                            label="Empresa"
                            {...getFieldProps('nombreEmpresa')}
                            error={Boolean(touched.nombreEmpresa && errors.nombreEmpresa)}
                            helperText={touched.nombreEmpresa && errors.nombreEmpresa}
                        />
                    </Stack>


                    <Box sx={{ mb: 2 }}>
                        <div style={{ paddingTop: 15 }}>
                            <Button
                                type="submit"
                                className="registerBtn"
                                variant="contained"
                                sx={{ mt: 1, mr: 1 }}
                            >
                                {'Siguiente'}
                            </Button>
                            <Button
                                disabled={false}
                                onClick={handleBack}
                                sx={{ mt: 1, mr: 1 }}
                            >
                                Regresar
                            </Button>
                        </div>
                    </Box>

                </Stack>
            </Form>
        </FormikProvider>
    );
}