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

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


export function StepFour(props) {


    const PlazaScheme = Yup.object().shape({
        puesto: Yup.object().required('Escoge un puesto valido')
    });

    let {  handleNext, handleBack } = props

    const formik = useFormik({
        initialValues: {
            puesto: {}
        },
        onSubmit: (fields) => {
            console.log('SUBMIT > ',fields)
            handleNext()
        },
        validationSchema: PlazaScheme,
    });

    const { handleSubmit } = formik;

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


                    <Box
                        component="form"
                        sx={{
                            '& .MuiTextField-root': { m: 1, width: '25ch' },
                        }}
                        noValidate
                        autoComplete="off"
                    >
                        <div>
                            <TextField
                                required
                                id="outlined-required"
                                label="Required"
                                defaultValue="Hello World"
                                />
                            <TextField
                                disabled
                                id="outlined-disabled"
                                label="Disabled"
                                defaultValue="Hello World"
                                />
                            <TextField
                                id="outlined-password-input"
                                label="Password"
                                type="password"
                                autoComplete="current-password"
                                />
                            <TextField
                                id="outlined-read-only-input"
                                label="Read Only"
                                defaultValue="Hello World"
                                InputProps={{
                                    readOnly: true,
                                }}
                                />
                            <TextField
                                id="outlined-number"
                                label="Number"
                                type="number"
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                />
                            <TextField id="outlined-search" label="Search field" type="search" />
                            <TextField
                                id="outlined-helperText"
                                label="Helper text"
                                defaultValue="Default Value"
                                helperText="Some important text"
                                />
                        </div>
                    </Box>

                    <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>
    );
}