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

import DateFnsUtils from '@date-io/date-fns';
import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';
import {  Button, Stack, TextField, MenuItem,FormControl, InputLabel, Select } from '@mui/material';

import { Service } from '../../Utils/HTTP';
import  useAuth from '../../Auth/useAuth';

import { departamentos } from '../Password/Rows'


export default function Manual ( props ) {

    const NewPlazaSchema = Yup.object().shape({
        nombrepuesto : Yup.string().required('El nombre es requerido').min(5, "El nombre del  puesto debe ser mayor a 5 caracteres").max(100),
        puestosuperior : Yup.number("El puesto superior debe ser un número"),
        aredepto : Yup.number().required('Escoge alguna área'),
        fecha : Yup.date("Ingresa una fecha válida"),
        notas : Yup.string("Ingresa una nota válida").min(5).max(150),
    })
    
    const [departamento, setDepartamento] = React.useState('');

    const changeDepartamento = (event) => {
        setDepartamento(event.target.value);
    };


    const [date, setDate] = React.useState(new Date());
    const auth = useAuth();
    const token = auth.getToken();

    let { visible, onClose, Complete } = props

    const formik = useFormik({
        initialValues: {
            nombrepuesto: "",
            puestosuperior: "",
            aredepto: 1,
            fecha: date,
            notas: "",
        },
        onSubmit: ( fields, { resetForm } ) => {

            fields['fecha'] =  new Date(fields.fecha).toISOString();
            fields['areadeptoplz_id'] = 1;
            fields['id'] = -1;

            let Rest = new Service('/plaza/save');

            Rest
            .post( fields, token )
            .then( _ => {
                resetForm();
                Complete(true);
                onClose();
            })
            .catch(err => {
                console.error(err)
                Complete(false);
            })

        },
        validationSchema: NewPlazaSchema,
    });

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

    return (

        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={onClose}>
            <Modal.Header>
                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title" style={{color : '#252525'}}>Agregar plaza</h4>
            </Modal.Header>
            <Modal.Body className="modal-body">

                <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('nombrepuesto')}
                                    error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
                                    helperText={touched.nombrepuesto && errors.nombrepuesto}
                                />

                                <TextField
                                    label="Puesto Superior"
                                    fullWidth
                                    {...getFieldProps('puestosuperior')}
                                    error={Boolean(touched.puestosuperior && errors.puestosuperior)}
                                    helperText={touched.puestosuperior && errors.puestosuperior}
                                />

                            </Stack>
                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                                <FormControl fullWidth>
                                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
                                    <Select
                                        labelId="demo-simple-select-label"
                                        value={departamento}
                                        label="Departamento"
                                        onChange={changeDepartamento}
                                        {...getFieldProps('aredepto')}
                                        error={Boolean(touched.aredepto && errors.aredepto)} >
                                        {
                                        departamentos.map( ( nivel, index ) => {
                                            return (
                                                <MenuItem key={nivel} value={index}>{nivel}</MenuItem>
                                            )
                                        })
                                    }
                                    </Select>
                                </FormControl>


                                <LocalizationProvider 
                                    dateAdapter={DateFnsUtils}>
                                    <DesktopDatePicker
                                        label="Fecha Creación"
                                        fullWidth
                                        inputFormat="dd/MM/yyyy"
                                        {...getFieldProps('fecha')}
                                        value={date}
                                        onChange={setDate}
                                        renderInput={(params) => 
                                            <TextField 
                                                disabled={true}
                                                label="Fecha Creación"
                                                fullWidth
                                                {...params} 
                                            />}
                                    />
                                </LocalizationProvider>

                            </Stack>

                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
                                <TextField
                                    id="filled-multiline-static"
                                    multiline
                                    rows={4}
                                    defaultValue="Default Value"
                                    variant="filled"
                                    label="Notas"
                                    fullWidth
                                    type="text"
                                    {...getFieldProps('notas')}
                                    error={Boolean(touched.notas && errors.notas)}
                                    helperText={touched.notas && errors.notas}
                                    />
                            </Stack>
                        </Stack>


                        <Modal.Footer>
                            <Button
                                type="submit"
                                className="registerBtn" 
                                variant="contained"
                                sx={{ mt: 1, mr: 1 }} >
                                {'Guardar'}
                            </Button>
                        </Modal.Footer>

                    </Form>
                </FormikProvider>
            </Modal.Body>
        </Modal>
    )
}
