import React, { Fragment, useState, useEffect } from "react";
import TextField from '@mui/material/TextField';   
import DateFnsUtils from '@date-io/date-fns'; 

import { 
  TimePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers'; 


import ptBrLocale from "date-fns/locale/pt-BR";
 

const ResponsiveTimePickers = (props) => {
  
  const [value, setValue] = useState(new Date());

  // props.func(value);

  useEffect(()=>{
    
    props.func(value);

  }, [value])

  return (

    <Fragment>

    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
          <TimePicker
              label="Hora do lembrete"
              value={value}
              
              onChange={(newValue) => {
                setValue(newValue);
              }}
              // Ativar se necessario
              // renderInput={(params) => <TextField {...params} />} 
                             
          />
      </MuiPickersUtilsProvider>    

    </Fragment>
 
  );
}

export default ResponsiveTimePickers