import React, { memo, useEffect } from 'react';
import { Modal } from 'react-bootstrap'
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';


import { TabPanel } from './TabPanel'
import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

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

import toast, { Toaster } from 'react-hot-toast';

import { Service } from '../../Utils/HTTP';
import { useSelector } from 'react-redux'
import { useQuery, useMutation, useQueryClient } from 'react-query'

const plazeSchema = Yup.object({
  id: Yup.number(),
  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('El área debe ser un número').required('Escoge alguna área'),
  fecha: Yup.date("Ingresa una fecha válida").required(),
  notas: Yup.string("Ingresa una nota válida").min(5, "Ingresa una nota mayor a 5").max(150, "Ingresa una nota menor a 150 caracteres"),
  tests: Yup.array()
}).required();


function Edit(props) {

  const { setValue, getValues, reset, control, register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(plazeSchema),
    defaultValues: {
      nombrepuesto: 'mingtest',
      puestosuperior: 77,
      fecha: '01/01/2019',
      notas: 'esto es un ejemplod e una nota',
      aredepto: 1,
      tests: []
    }
  });

  const onSubmit = data => {

    let body = {
      ...data,
      fecha: new Date(data.fecha).toISOString()
    }

    puestoMutation.mutate(body, {
      onSuccess: () => {
        close();
        setOpen(false)
        toast.success("Puesto Actualizado!!")
        queryClient.invalidateQueries('puestos')
      },
      onError: () => {
        //close();
        //setOpen(false)
        toast.error("Lo sentimos ocurrió error inténtalo más tarde")
      }
    })

  }

  const auth = useSelector((state) => state.token)
  const queryClient = useQueryClient()
  let { visible, toggle } = props
  // const [puestoSup, setPuestoSup] = React.useState('');

  const [open, setOpen] = React.useState(false);
  const [tab, setTab] = React.useState(0);
  const [checklist, setChecklist] = React.useState([]);

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

  const addPrueba = (check, id) => {
    let tests = getValues("tests")
    console.log(tests)
    let temp;
    if (check) {
      temp = [...tests, { id }]
    } else {
      temp = tests.filter(test => test.id !== id);
    }
    setChecklist(temp.map(test => test.id))
    setValue('tests', temp)
  };

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

  const updatePuesto = async (fields) => {
    let rest = new Service('/plaza/edit');
    return rest.putQuery(fields, auth.token)
  }

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

  const puestoMutation = useMutation(updatePuesto)

  const close = () => toggle("EDIT", { id: null });

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

  useEffect(() => {
    if (visible == null) return;
    let rest = new Service(`/plaza/getthis/${visible}`)
    rest
      .getQuery(auth.token)
      .then(response => {
        console.log(response.data)
        let { areadeptoplz_id, fecha, tests } = response.data;
        let temp_test = tests.map(t => ({ id: t.id }))
        setChecklist(temp_test.map(t => t.id))
        reset({ ...response.data, aredepto: areadeptoplz_id, fecha: new Date(fecha), tests: temp_test })
      })
      .catch(console.log)
  }, [visible, auth, reset])

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

  return (

    <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
      <Modal.Header>
        <button onClick={close} type="button" className="close" data-dismiss="modal">&times;</button>
        <h4 className="modal-title" style={{ color: '#252525' }}>Editar 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>

        <form onSubmit={handleSubmit(onSubmit)}>
          <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
                          label={test.nombre}
                          key={test.id}
                          control={
                            <Checkbox
                              checked={checklist.includes((test.id))}
                              onChange={(event) => addPrueba(event.target.checked, test.id)} />}
                        />
                      )) : null
                  }
                </FormGroup>
              </Box>
            </Stack>
          </TabPanel>

          <TabPanel value={tab} index={0} >
            <Stack spacing={3}>

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

                <TextField
                  name="nombrepuesto"
                  label="Nombre"
                  fullWidth
                  helperText={errors.nombrepuesto?.message}
                  error={Boolean(errors?.nombrepuesto)}
                  {...register("nombrepuesto")} />

                <FormControl fullWidth>
                  <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
                  <Controller
                    helperText={errors.puestosuperior?.message}
                    error={Boolean(errors?.puestosuperior)}
                    name="puestosuperior"
                    control={control}
                    render={({field}) => 
                      <Select {...field}>
                        {
                          categories ?
                            categories.data.map(cate => {
                              return (
                                <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
                              )
                            })
                            : <MenuItem>Null</MenuItem>
                        }
                      </Select>
                    }
                    >
                    
                  </Controller>
                </FormControl>
              </Stack>

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

                <FormControl fullWidth>
                  <InputLabel id="demo-simple-select-label2">Departamento</InputLabel>
                  <Controller
                    helperText={errors.aredepto?.message}
                    error={Boolean(errors?.aredepto)}
                    name="aredepto"
                    control={control}
                    render={({ field }) =>
                      <Select {...field}>
                        {
                          categories ?
                            categories.data.map(cate => {
                              return (
                                <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
                              )
                            })
                            : <MenuItem value={1}>hola</MenuItem>
                        }
                      </Select>
                    }>
                  </Controller>
                </FormControl>

                <LocalizationProvider dateAdapter={DateFnsUtils}>
                  <Controller
                    name="fecha"
                    control={control}
                    render={({ field }) =>
                      <DesktopDatePicker
                        {...field}
                        helperText={errors.fecha?.message}
                        error={Boolean(errors?.fecha)}
                        label="Fecha Creación"
                        fullWidth
                        inputFormat="dd/MM/yyyy"
                        renderInput={(params) => <TextField {...params} helperText={errors.fecha?.message} />} />}
                  >
                  </Controller>
                </LocalizationProvider>
              </Stack>

              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
                <TextField
                  helperText={errors.notas?.message}
                  error={Boolean(errors?.notas)}
                  name="notas"
                  multiline
                  rows={4}
                  label="Notas"
                  fullWidth
                  type="text"
                  {...register("notas")}
                />
              </Stack>
            </Stack>
          </TabPanel>

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

        </form>

      </Modal.Body>
      <Backdrop
        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={open}
        onClick={() => console.log('backdrop')} >
        <CircularProgress color="inherit" />
      </Backdrop>
      <Toaster position="top-right" />

    </Modal>
  )
}

export default memo(Edit);
