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

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

export function StepTwo(props) {

    const PlazaScheme = Yup.object().shape({
        puesto_id: 
        Yup.number()
        .positive('Escoge un puesto válido')
        .required('Escoge un puesto válido')
    });

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

    const formik = useFormik({
        initialValues: {
            puesto_id: password.puesto_id
        },
        onSubmit: (fields) => {
            setPassword({...password, ...fields})
            handleNext()
        },
        validationSchema: PlazaScheme,
    });

    const [age, setAge] = React.useState('');

    const handleChange = (event) => {
        console.log("Edad -> ",event.target.value)
        setAge(event.target.value);
    };

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

    return (
        <FormikProvider style={{ padding : 25 }} value={formik}>
            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                <Stack spacing={2}>

                    <FormControl fullWidth>
                        <InputLabel id="demo-simple-select-label">Puestos</InputLabel>
                        <Select
                            labelId="demo-simple-select-label"
                            id="demo-simple-select"
                            value={age}
                            label="Puestos"
                            onChange={handleChange}
                            {...getFieldProps('puesto_id')}
                            error={Boolean(touched.puesto_id && errors.puesto_id)}
                        >
                            <MenuItem value={10}>Full Stack</MenuItem>
                            <MenuItem value={20}>Web Developer</MenuItem>
                            <MenuItem value={30}>Database Administrator</MenuItem>
                        </Select>
                    </FormControl>
                    <label className="feedback_error">
                        {touched.puesto_id && errors.puesto_id}
                    </label>
                    <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>
    );
}