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

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

import {
    CheckBox as CheckBoxIcon,
    CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon
} from '@mui/icons-material';

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export function StepTree(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 {errors, touched, handleSubmit, getFieldProps, setValues } = formik;

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

                    <Autocomplete
                        multiple
                        id="checkboxes-tags-demo"
                        options={top100Films}
                        disableCloseOnSelect
                        getOptionLabel={(option) => option.label}
                        onChange={(a,b,c) => {
                            setValues({
                                puesto : b[0]
                            })
                        }}
                        renderOption={(props, option, { selected }) => (
                            <li {...props}>
                                <Checkbox
                                    icon={icon}
                                    checkedIcon={checkedIcon}
                                    // style={{ marginRight: 8 }}
                                    checked={selected}
                                    />
                                {option.label}
                            </li>
                        )}
                        renderInput={(params) => (
                            <TextField 
                                {...getFieldProps('puesto')}
                                error={Boolean(touched.puesto && errors.puesto)}
                                helperText={touched.puesto && errors.puesto}
                                {...params} 
                                label="Escribe el nombre de la prueba" 
                                placeholder="Prueba" 
                            />
                        )}
                    />

                    <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>
    );
}
const top100Films = [
    { label: 'City of God', year: 2002 },
    { label: 'Se7en', year: 1995 },
    { label: 'The Silence of the Lambs', year: 1991 },
    { label: "It's a Wonderful Life", year: 1946 },
    { label: 'Life Is Beautiful', year: 1997 },
    { label: 'The Usual Suspects', year: 1995 },
    { label: 'Grave of the Fireflies', year: 1988 },
    { label: 'Paths of Glory', year: 1957 },
    { label: 'Django Unchained', year: 2012 },
    { label: 'The Shining', year: 1980 },
    { label: 'WALL·E', year: 2008 },
    { label: 'American Beauty', year: 1999 },
    { label: 'The Dark Knight Rises', year: 2012 },
];