projeto-hit/frontend/src/components/ChatEnd/ModalChatEnd/index.js

import * as React 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 TextField from '@mui/material/TextField';  
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 TextArea1 from '../TextArea' 
import TextArea2 from '../TextArea' 



function 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 [open, setOpen] = React.useState(true);
  const [scroll, /*setScroll*/] = React.useState('body');
  const [schedulingId, setScheduling] = React.useState(null)  
  const [startDate, setDatePicker] = React.useState(new Date()) 
  const [timerPicker, setTimerPicker] = React.useState(new Date()) 
  const [textArea1, setTextArea1] = React.useState()
  const [textArea2, setTextArea2] = React.useState()

  const [data, setData] = React.useState([
    {'id': 1, 'name': 'STATUS1'},
    {'id': 2, 'name': 'STATUS2'},
    {'id': 3, 'name': 'STATUS3'},
    {'id': 4, 'name': 'STATUS4'},
  ])
 
  const handleClose = (event, reason) => {

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

    setOpen(false);
  };

  const descriptionElementRef = React.useRef(null);
  React.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 2
const datePickerValue = (data) => { 
  console.log('datePickerValue: ',(data));   
  setDatePicker(data)
}

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

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

// Get from child 5
const textArea2Value = (data) => { 
  console.log('textArea2Value: ',(data));   
  setTextArea2(data)
}

  return (
 

    <div> 
      
      <Dialog 
        open={open}
        onClose={handleClose}
        
        // 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}
          >
            {/* <Box 
              component="form"
              sx={{
                '& > :not(style)': { m: 1, width: '35ch' },
              }}
              noValidate
              autoComplete="off"
            >
              <TextField id="outlined-basic" label="Outlined" variant="outlined" /> 
            </Box> */}


            {/* <Box
                  sx={{
                    width: 500,
                    height: 300,
                    // backgroundColor: 'primary.dark',
                    // '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
                  }}>
                      <TextField id="cpf_cnpj" label="cpf/cnpj" variant="outlined" /> 
                      
            </Box> */}

          
        
            <Box
                  sx={{
                    width: 500,
                    height: 430,
                    // backgroundColor: 'primary.dark',
                    // '&:hover': {backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7],},
                  }}>
                    <Box  sx={{
                          display: 'grid',  
                        }}>
                        <Item>
                            <div>Selecione um status para encerrar o Atendimento</div>

                            <Item>  
                            <SelectField func={textFieldSelect} header={'Status de atendimento'} currencies={data.map((obj)=>{
                                      return {'value': obj.id, 'label': obj.name}
                                    })}/>
                            </Item>  

                            <Item>
                                <Box
                                  sx={{ 
                                    maxWidth: '100%',
                                  }}
                                >
                                  <TextField fullWidth label="CPF/CNPJ" id="fullWidth" size="small" margin="1"/>
                                </Box>
                            </Item> 

                        </Item> 

                      </Box>  

                    <Item>

                        <div>Lembrete de retorno</div>

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


                      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}> 
                        
                        <Item><TextArea1 func={textArea1Value} hint={'Lembrete'}/> </Item> 
                        
                        <Item><TextArea2 func={textArea2Value} hint={'Mensagem para cliente'}/></Item>
                            
                      </Box>

                    </Item>
                      
            </Box> 



         

             

          </DialogContentText>
        </DialogContent>
        
 
        <DialogActions>     
          <div style={{marginRight:'50px'}}>
             <div>footer</div>
          </div>
          <Button onClick={handleClose}>Ok</Button>  
        </DialogActions>
      </Dialog>
    </div> 

  );
}

export default Modal