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

import {
    Box, Button, Stack, Select,
    FormControl,MenuItem,InputLabel
} from '@mui/material';

import { useQuery } from 'react-query';
import { Service } from '../../../Utils/HTTP.js'
import { useSelector } from 'react-query';


export function Puesto(props) {

  const auth = useSelector((state) => state.token)

  const PlazaScheme = Yup.object().shape({
    puesto_id: 
    Yup.number()
    .positive('Escoge un puesto válido')
    .required('Escoge un puesto válido')
  });


  const getPuestos = async () => {
    let rest = new Service('/plaza/getall')
    return rest.getQuery(auth.token);
  }

  let { data } = useQuery('puetos', getPuestos)
  console.log("puestos >>", data )

  let {  handleNext, handleBack, password, setPassword } = props

  const formik = useFormik({
    initialValues: {
      puesto_id: password.puesto_id
    },
    onSubmit: (fields) => {
      setPassword({...password, ...fields})
      handleNext()
    },
    validationSchema: PlazaScheme,
  });

  const [age, setAge] = React.useState('');

  const handleChange = (event) => setAge(event.target.value);

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

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

          <FormControl fullWidth>
            <InputLabel id="demo-simple-select-label">Puestos</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={age}
              label="Puestos"
              onChange={handleChange}
              {...getFieldProps('puesto_id')}
              error={Boolean(touched.puesto_id && errors.puesto_id)}
            >
              <MenuItem value={10}>Full Stack</MenuItem>
              <MenuItem value={20}>Web Developer</MenuItem>
              <MenuItem value={30}>Database Administrator</MenuItem>
            </Select>
          </FormControl>
          <label className="feedback_error">
            {touched.puesto_id && errors.puesto_id}
          </label>
          <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>
  );
}
