import React, { useState, useEffect, useRef } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions'; 
 
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';  
import PropTypes from 'prop-types';
import Box from '@mui/material/Box'; 
import SelectField from "../../Report/SelectField"; 
import DatePicker from '../../Report/DatePicker'  
import TimerPickerSelect from '../TimerPickerSelect' 

// import MainHeader from "../../components/MainHeader";
// import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
// import TableRowSkeleton from "../../components/TableRowSkeleton";
// import Title from "../../components/Title";


import TextareaAutosize from '@mui/material/TextareaAutosize'; 

import { addHours, subHours } from "date-fns"; 



import { 
  IconButton,
  makeStyles,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Typography,
} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  mainPaper: {
    flex: 1,
    padding: theme.spacing(1),
    overflowY: "scroll",
    ...theme.scrollbarStyles,
  },
  customTableCell: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
}));

const Item = (props) => {
 
  const { sx, ...other } = props;
  return (
    <Box
      sx={{
        bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'),
        color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
        border: '1px solid',
        borderColor: (theme) =>
          theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
        p: 1,
        m: 1,
        borderRadius: 2,
        fontSize: '0.875rem',
        fontWeight: '700',
        ...sx,
      }}
      {...other}
    />
  );
}

Item.propTypes = {
  sx: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
    ),
    PropTypes.func,
    PropTypes.object,
  ]),
}; 
 

const Modal = (props) => {

  const classes = useStyles();
   
  const [open, setOpen] = useState(true);
  const [scroll, /*setScroll*/] = useState('body');
  const [scheduleId, setScheduling] = useState(null)  
  const [startDate, setDatePicker] = useState(new Date())  
  const [timerPicker, setTimerPicker] = useState(new Date()) 
  const [textArea1, setTextArea1] = useState()  
 

  const [data] = useState(props.schedules) 
  const [schedulesContact] = useState(props.schedulesContact)
 
  const handleCancel = (event, reason) => {

    if (reason && reason === "backdropClick") 
        return;
 
    setOpen(false);
  };

 

  function greetMessageSchedule(scheduleDate){
    return  `podemos confirmar sua consulta agendada para hoje às ${scheduleDate}?`
  }
 
  function formatedTimeHour(timer){
    return  `${timer.getHours().toString().padStart(2, '0')}:${timer.getMinutes().toString().padStart(2, '0')}`
  }


  // Get from child 2
const datePickerValue = (data) => { 
  console.log('datePickerValue: ',(data));   
  setDatePicker(data) 
}

// Get from child 3
const timerPickerValue = (data) => { 
  console.log('timerPickerValue: ',(data));   
  setTimerPicker(data)
}

const dateCurrentFormated = () => { 

  let date = new Date()
  let day = date.getDate().toString().padStart(2, '0');
  let month = (date.getMonth()+1).toString().padStart(2, '0');
  let year = date.getFullYear();   
   
  return `${year}-${month}-${day}`

}

  const handleChatEnd = (event, reason) => {   

    if (reason && reason === "backdropClick") 
        return;

    if (scheduleId === '1'){ 
    }
    else if(textArea1.trim().length<10){
      alert('Mensagem muito curta!\nMínimo 10 caracteres.')
      return
    }
    else if((new Date(timerPicker).getHours() > 20 && new Date(timerPicker).getMinutes() > 0) ||
    (new Date(timerPicker).getHours() < 7)){
      alert('Horário comercial inválido!\n Selecione um horário de lembrete válido entre às 07:00 e 20:00')
      return
    }
    else if(startDate === dateCurrentFormated()){      

      if(((new Date(timerPicker).getHours() === new Date().getHours()) &&
         (new Date(timerPicker).getMinutes() <= new Date().getMinutes())) ||
         (new Date(timerPicker).getHours() < new Date().getHours())
      ){
        alert('Para agendamentos do dia, é necessário que o horário do lembrete seja maior que o horário atual!')
        return
      }
    } 

    // console.log('NEW DATE: ', formatedTimeHour(subHours(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`), 1))+':00')
    

    props.func({ 
      'scheduleId': scheduleId,  
      // 'schedulingDate': `${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`,
      'schedulingDate': startDate+' '+formatedTimeHour(subHours(new Date(`${startDate} ${timerPicker.getHours()}:${timerPicker.getMinutes()}:${timerPicker.getSeconds()}`), 1))+':00',
      'message': textArea1  
    });

    

    setOpen(false);
  };
 

  const descriptionElementRef = useRef(null);
  useEffect(() => {
    if (open) {
      const { current: descriptionElement } = descriptionElementRef;
      if (descriptionElement !== null) {
        descriptionElement.focus();
      }
    }
  }, [open]);


  // Get from child 1
const textFieldSelect = (data) => {
  console.log('textFieldSelect: ',data);  
  setScheduling(data)
}



// Get from child 4
// const textArea1Value = (data) => { 
//   console.log('textArea1Value: ',(data));   
//   setTextArea1(data)
// } 

useEffect(()=>{

  if (parseInt(timerPicker.getHours()) > 11  && parseInt(timerPicker.getHours()) < 18){
    //  setTextArea1('Boa tarde, '+greetMessageSchedule( formatedTimeHour(addHours(new Date(timerPicker), 1)))) 
     setTextArea1('Boa tarde, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
  }
  else if(parseInt(timerPicker.getHours()) < 12){
    // setTextArea1('Bom dia, '+greetMessageSchedule( formatedTimeHour(addHours(new Date(timerPicker), 1)))) 
    setTextArea1('Bom dia, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
  }
  else if(parseInt(timerPicker.getHours()) > 17){ 

    // setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(addHours(new Date(timerPicker), 1)))) 
    setTextArea1('Boa noite, '+greetMessageSchedule( formatedTimeHour(new Date(timerPicker), 1)))
  }    
  
     
},[timerPicker]) 


const handleChange = (event) => {
    
  setTextArea1(event.target.value);

};

  return ( 
 
 
<Dialog 
        open={open}
        onClose={handleCancel} 
        // fullWidth={true}
        // maxWidth={true}    
        disableEscapeKeyDown

        scroll={scroll}
        aria-labelledby="scroll-dialog-title"
        aria-describedby="scroll-dialog-description"
      >   

        <DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
        <DialogContent dividers={scroll === 'body'}>

          <DialogContentText
            id="scroll-dialog-description"
            ref={descriptionElementRef}
            tabIndex={-1}
          >
            
          </DialogContentText> 

              
            <Box
                  sx={{
                    width: 500,
                    height: '100%',
                    // backgroundColor: 'primary.dark',
                    // '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
                  }}> 

                      <Box  sx={{
                          display: 'grid',  
                        }}>
                        <Item>
                            <span>Selecione uma opção para encerrar o Atendimento</span>

                            <Item>  
                            <SelectField func={textFieldSelect} emptyField={false} header={'Opções de encerramento do atendimento'} currencies={data.map((obj)=>{
                                      return {'value': obj.id, 'label': obj.name}
                                    })}/>
                            </Item>   

                        </Item> 

                      </Box> 
                      
                      {scheduleId==='2' &&
                      
                      <Item> 

                        <span>Lembrete de retorno</span>

                      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                        
                        <Item><DatePicker func={datePickerValue} minDate = {true} title={'Data do retorno'}/></Item>
                        
                        <Item><TimerPickerSelect func={timerPickerValue} title={'Hora do lembrete'}/></Item>
                           
                      </Box>


                      <Box sx={{display: 'flex', flexDirection: 'column' }}>                         
                        
                        {/* <Item><TextArea1 func={textArea1Value} greetRemember={greetRemember} hint={'Mensagem para cliente'}/></Item> */}
                            <Item>
                              <TextareaAutosize 
                                  aria-label="minimum height"
                                  minRows={3} 
                                  value={textArea1}
                                  placeholder={'Mensagem para lembrar cliente'}   
                                  onChange={ handleChange}  
                                  style={{ width: '100%' }}
                              />
                            </Item>
                      </Box>

                    </Item>
                    }

                    {/* <Item> 
                    <MainHeader>
                        <Title>Titulo 1</Title>
                        <MainHeaderButtonsWrapper>
                          <Button
                            variant="contained"
                            color="primary"
                            // onClick={handleOpenQueueModal}
                          >
                            buttons add
                          </Button>
                        </MainHeaderButtonsWrapper>
                      </MainHeader>
                      <Paper variant="outlined">
                        <Table size="small">
                          <TableHead>
                            <TableRow>
                              <TableCell align="center">
                                table name
                              </TableCell>
                              <TableCell align="center">
                                table color
                              </TableCell>
                              <TableCell align="center">
                                table greeting
                              </TableCell>
                              <TableCell align="center">
                                table actions
                              </TableCell>
                            </TableRow>
                          </TableHead>
                          <TableBody>
                            <>
                              {schedulesContact.map((queue) => (
                                <TableRow key={queue.id}>
                                  <TableCell align="center">{queue.name}</TableCell>
                                  <TableCell align="center">
                                    <div className={classes.customTableCell}>
                                      <span
                                        style={{
                                          backgroundColor: queue.color,
                                          width: 60,
                                          height: 20,
                                          alignSelf: "center",
                                        }}
                                      />
                                    </div>
                                  </TableCell>
                                  <TableCell align="center">
                                    <div className={classes.customTableCell}>
                                      <Typography
                                        style={{ width: 300, align: "center" }}
                                        noWrap
                                        variant="body2"
                                      >
                                        {queue.greetingMessage}
                                      </Typography>
                                    </div>
                                  </TableCell>
                                  <TableCell align="center">
                                    <IconButton
                                      size="small"
                                      // onClick={() => handleEditQueue(queue)}
                                    >
                                      <Edit />
                                    </IconButton>
                
                                    <IconButton
                                      size="small"
                                      onClick={() => {
                                        setSelectedQueue(queue);
                                        setConfirmModalOpen(true);
                                      }}
                                    >
                                      <DeleteOutline />
                                    </IconButton>
                                  </TableCell>
                                </TableRow>
                              ))}
                              {loading && <TableRowSkeleton columns={4} />}
                            </>
                          </TableBody>
                        </Table>
                      </Paper> 

                    </Item> */}
                      
            </Box>   
        </DialogContent>
        
 
        <DialogActions>     
          <div style={{marginRight:'50px'}}>
          <Button onClick={handleCancel}>Cancelar</Button>  
          </div>
          <Button onClick={handleChatEnd}>Ok</Button>  
        </DialogActions>
      </Dialog> 
 

  );
}

export default Modal