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

import DateFnsUtils from '@date-io/date-fns';
import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';

import {
    Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
    Backdrop, CircularProgress,Box,Divider,
    Tabs, Tab, FormGroup, Checkbox,FormControlLabel
} from '@mui/material';

import { Service } from '../../Utils/HTTP';
import { useQuery, useMutation, useQueryClient } from 'react-query';
import useAuth from '../../Auth/useAuth';
import { TabPanel } from './TabPanel'

function Manual(props) {

    const auth = useAuth();
    const token = auth.getToken();

    const getCategories = async () => {
        let rest = new Service("/categoria/getAll")
        return await rest.getQuery(token)
    }

    const getTest = async () => {
        let rest = new Service("/tests/getAll")
        return await rest.getQuery(token)
    }

    const { data } = useQuery('categories', getCategories);
    const { data: testsCatalog } = useQuery('tests', getTest);
    const queryClient = useQueryClient();

    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").required("El puesto es requerido"),
        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, "Ingresa una nota válida").max(150),
        tests: Yup.array()
    })

    const [departamento, setDepartamento] = React.useState('');
    const [puestoSup, setPuestoSup] = React.useState('');
    const [open, setOpen] = React.useState(false);
    const [date, setDate] = React.useState(new Date());
    const [tab, setTab] = React.useState(0);
    const [checklist, setChecklist] = React.useState([]);

    const handleClose = () => false

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

    const agregarPuesto = async (puesto) => {
        let rest = new Service('/plaza/save');
        return await rest.postQuery(puesto, token);
    }

    const puestoMutation = useMutation(agregarPuesto)

    let { visible, onClose } = props

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

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

            puestoMutation.mutate(fields, {
                onSuccess: () => {
                    setOpen(false)
                    resetForm();
                    onClose();
                    queryClient.invalidateQueries('puestos')
                    toast.success("Puesto Agregado")
                },
                onError: () => {
                    setOpen(false)
                    toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
                }
            })
        },
        validationSchema: NewPlazaSchema,
    });

    const changeTab = (_event, newValue) => {
        setTab(newValue);
    };
    

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

    const addPrueba = (check,id) => {
        let { tests } = values
        let temp ;
        if(check){
            temp = [...tests, {id}]
        }else{
            temp = tests.filter( test => test.id !== id);
        }
        setChecklist(  temp.map( test => test.id) )
        setValues({...values, tests: temp})
    };

    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 Puesto</h4>
            </Modal.Header>
            <Modal.Body className="modal-body">

                <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
                    <Tab label="Información" />
                    <Tab label="Pruebas" />
                </Tabs>

                <FormikProvider style={{ paddingTop: 25 }} value={formik}>
                    <Form autoComplete="off" noValidate onSubmit={handleSubmit}>

                        <TabPanel value={tab} index={1}>
                            <Stack spacing={1}>
                                <Box style={{ paddingTop :5, paddingLeft :15 }}>
                                    <Divider/>
                                        <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
                                    <Divider/>
                                    <FormGroup>
                                        {
                                            testsCatalog ?
                                            testsCatalog.data.map( test => (
                                                <FormControlLabel 
                                                    key={test.id}
                                                    control={
                                                        <Checkbox 
                                                            checked={checklist.includes((test.id))}
                                                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
                                                        />
                                                    } 
                                                    label={test.nombre} 
                                                    />
                                            )): null
                                        }
                                    </FormGroup>
                                </Box>
                            </Stack>
                        </TabPanel>

                        <TabPanel value={tab} index={0}>

                            <Stack spacing={3}>


                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
                                    <TextField
                                        label="Nombre"
                                        fullWidth
                                        {...getFieldProps('nombrepuesto')}
                                        error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
                                        helperText={touched.nombrepuesto && errors.nombrepuesto}
                                    />

                                    <FormControl fullWidth>
                                        <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
                                        <Select
                                            labelId="demo-simple-select-label"
                                            value={puestoSup}
                                            label="Puesto Superior"
                                            onChange={changePuestoSup}
                                            {...getFieldProps('puestosuperior')}
                                            helperText={touched.puestosuperior && errors.puestosuperior}
                                            error={Boolean(touched.puestosuperior && errors.puestosuperior)} >
                                            {
                                                data ?
                                                    data.data.map(cate => {
                                                        return (
                                                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
                                                        )
                                                    })
                                                    : <MenuItem>Null</MenuItem>
                                            }
                                        </Select>
                                    </FormControl>

                                </Stack>

                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>

                                    <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)} >
                                            {
                                                data ?
                                                    data.data.map(cate => {
                                                        return (
                                                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
                                                        )
                                                    })
                                                    : <MenuItem>Null</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={4}>
                                    <TextField
                                        id="filled-multiline-static"
                                        multiline
                                        rows={4}
                                        variant="filled"
                                        label="Notas"
                                        fullWidth
                                        type="text"
                                        {...getFieldProps('notas')}
                                        error={Boolean(touched.notas && errors.notas)}
                                        helperText={touched.notas && errors.notas}
                                    />
                                </Stack>
                            </Stack>

                        </TabPanel>


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

                    </Form>
                </FormikProvider>
            </Modal.Body>
            <Backdrop
                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
                open={open}
                onClick={handleClose} >
                <CircularProgress color="inherit" />
            </Backdrop>
            <Toaster position="top-right" />
        </Modal>
    )
}
export default memo(Manual);
