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

import {  
    Box, Button,
    Stack, TextField, 
    InputLabel,MenuItem,FormControl,Select
} from '@mui/material';

import { niveles_educativos } from '../Rows'

export function StepOne(props) {

    const [educativo, setEducativo] = useState('');

    const changeNivelEducativo = (event) => {
        setEducativo(event.target.value);
    };

    const CandidatoSchema = Yup.object().shape({
        firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('El nombre es requerido'),
        lastName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('El apellido es requerido'),
        puesto: Yup.string().required('El puesto es requerido'),
        niveles_educativo: Yup.number().required('Selecciona un nivel educativo')
    });

    let {  handleNext, handleBack } = props

    const formik = useFormik({
        initialValues: {
            firstName: '',
            lastName: '',
            puesto: '',
            niveles_educativo: 0,
        },
        onSubmit: (fields) => {
            console.log('SUBMIT > ',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('firstName')}
                            error={Boolean(touched.firstName && errors.firstName)}
                            helperText={touched.firstName && errors.firstName}
                            />

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

                    <TextField
                        fullWidth
                        type="text"
                        label="Experiencia laboral o puesto"
                        {...getFieldProps('puesto')}
                        error={Boolean(touched.puesto && errors.puesto)}
                        helperText={touched.puesto && errors.puesto}
                        />

                    <FormControl fullWidth>
                        <InputLabel id="demo-simple-select-label">Nivel Educativo</InputLabel>
                        <Select
                            labelId="demo-simple-select-label"
                            id="demo-simple-select"
                            value={educativo}
                            label="Nivel Educativo"
                            onChange={changeNivelEducativo}
                            {...getFieldProps('niveles_educativo')}
                            error={Boolean(touched.niveles_educativo && errors.niveles_educativo)}
                        >
                            {
                                niveles_educativos.map( ( nivel, index ) => {
                                return (
                                    <MenuItem key={nivel} value={index}>{nivel}</MenuItem>
                                )
                            })
                        }
                        </Select>
                    </FormControl>


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

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