Untitled

import React,{useState, useEffect, useCallback} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useStyles } from './styles';

import Immutable from 'seamless-immutable';
 import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import DadosBasicos from './dadosBasico';
import Visual from './visual';
import Seguranca from './seguranca';
import Grupos from './grupos';
import Categorizacoes from './categorizacoes';
import ControlsTab from './controlsTab';
import EventoCrudActions from '../../../store/ducks/eventoCrud';
import HeaderItem from '../../HeaderItem';
import MenuIco from '../../Menu/Icone';
import { useTheme,Divider, CircularProgress } from '@material-ui/core';
import Loading from '../../Loading';
import ButtonCancel from '../../ButtonCancel';
import ButtonSuccess from '../../ButtonSuccess';
import Error from '../../Error';

// TABS 
function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box p={3}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
}
// TABS

export default function EventoForm ({menuSelecionado, close, popup}){ //eventoId

    const codControlMenu = menuSelecionado?.cod_control;

    const dispatch   = useDispatch();
    const classes    =   useStyles();
    const theme      = useTheme();

    const {loadingSave, errorSave, loading, data, error} = useSelector(state=>state.crud.eventoCrud); 
    const eventoAtual                                    = useSelector(state=>state.evento.data); 

    const [dadosAlterados, setDadosAlterados]           = useState()
    const [alteraTab, setAlteraTab]                     = useState(false)
    const [proximaTab, setProximaTab]                   = useState(false)
    const [tabAtual, setTabAtual]                       = useState(0) 
    const [isFormEdited, setIsFormEdited]               = useState(false) 
    const [eventoId, setEventoId]                       = useState(false) 
    const [temControles, setTemControles]               = useState(false)
   
    const controlEditOrCreate = (codControlMenu === 'MN_DIR_EDITA_EVENTO') ? 'edition' : 'create';

    const handleSave = () => {
      if(dadosAlterados.evento_id ){// Caso edição
          handleChange(null, 'salvar')  
      } else {
        
        if(tabAtual < (temControles?5:4) ){
          handleChange(null, tabAtual+1)
        }else{
          handleChange(null, 'salvar')
        }

      }
    };

    let labelSave = (tabAtual  < (temControles?5:4) && !dadosAlterados?.evento_id) ? 'Continuar' : 'Salvar';

    function a11yProps(index) {
        return {
          id: `simple-tab-${index}`,
          'aria-controls': `simple-tabpanel-${index}`,
        };
    }

    const handleChange = (event, novaPosicao) => { 
      //A tab de Controls só existe na Edição e não no cadastro, então o número de tabs vai variar
        if(tabAtual < (temControles?6:5) &&  proximaTab !== 'Salvar' ){
          setAlteraTab(true); // Controle Se Posso ou não enviar os dados
          setProximaTab(novaPosicao);

        }
    };


    const changeTab = useCallback((dados) => { // Efeuta a troca de tab
      if(proximaTab !== false && alteraTab !== false){
        if(proximaTab === 'salvar'){ 
          setAlteraTab(false)                
          // let eventoCod = (codControlMenu === 'MN_DIR_EDITA_EVENTO') ? eventoAtual.cod_evento : false;

          /* 
            A linha a baixo é feita para resolver o problema do envio de dados quando o stare atualiza apos envio para o sagas, 
            fato que acontece nos dados enviados do component grupos.
          */
          let objDadosAlterados = {...dadosAlterados, ...dados}; 
          let controlEditOrCreate = (codControlMenu === 'MN_DIR_EDITA_EVENTO') ? 'edition' : 'create'; 
          objDadosAlterados.controlEditOrCreate = controlEditOrCreate;
          // setTabAtual(0)                   
          setProximaTab(false)  
          dispatch(EventoCrudActions.saveEventoCrudRequest(objDadosAlterados.cod_evento, objDadosAlterados, ()=> close()));
        }else{
          setAlteraTab(false)
          setTabAtual(proximaTab); 
    
        }
      } 
    }, [alteraTab, close, codControlMenu, dadosAlterados, dispatch, proximaTab]);
    useEffect(() => {
      if(menuSelecionado?.des_menu !== '' && menuSelecionado?.des_menu !== undefined){
        setEventoId( (menuSelecionado?.des_menu === 'eventoFormCria') ? false : eventoAtual?.evento_id)
      }
    }, [eventoAtual, menuSelecionado]); 

    useEffect(()=>{ 
      let evento = codControlMenu === 'MN_DIR_EDITA_EVENTO' ? eventoAtual.cod_evento : false;
      
      dispatch(EventoCrudActions.loadEventoCrudRequest(evento, eventoId));
      if(eventoAtual.cod_evento){
         setIsFormEdited(true);
      }                   
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[ dispatch, eventoAtual,eventoId]);

    useEffect(() => { // Caso aconteça algum erro limpa o redux
      return () => {
       dispatch(EventoCrudActions.clearDataRequest());
      }
   },[dispatch]);
    
    useEffect(() => {
      let dadosRedux = Immutable.asMutable(data,{deep: true})
      setDadosAlterados({...dadosRedux}); 
      setTemControles(data?.controles?.length>0);
    },[data]);
  
    return (
        <Box minWidth={450} maxWidth={950} style={{overflowY: "auto"}}>
          <HeaderItem
            popup={popup}
            icone={ <MenuIco nomIcone={menuSelecionado.icone} className={classes.iconImg} classNameFontAwesome={classes.iconImg} color={theme.palette.secondary.dark} /> }
            titulo={menuSelecionado.des_menu}
            close={close} 
          />
          <Divider />
          <div style={{width: '100%'}} >
              {loading && <Loading size={30} loading={loading} />}
            
              {!loading && !error && <>
                {
                  dadosAlterados?.qtd_autocad_realizado &&
                  <div>
                    <Typography  color="textPrimary" variant="subtitle1"  className={classes.cabecalho} >
                      Quantidade autocadastro realizado: {dadosAlterados?.qtd_autocad_realizado}
                    </Typography>
                  </div> 
                }
                <AppBar position="static">
                    <Tabs
                      value={tabAtual} 
                      onChange={handleChange} 
                      aria-label="Controle Evento"   
                      variant="scrollable"
                      scrollButtons="auto"
                    >
                      <Tab label="Dados básicos" {...a11yProps(0)} />
                      <Tab label="Visual" {...a11yProps(1)} />
                      <Tab label="Segurança" {...a11yProps(2)} />
                      <Tab label="Grupos" {...a11yProps(3)} />
                      <Tab label="Categorizações" {...a11yProps(4)} />
                      {temControles && <Tab label="Controles" {...a11yProps(5)} />}

                    </Tabs>
                </AppBar>
                <TabPanel value={tabAtual}  index={0}>
                    <DadosBasicos dadosAlterados={dadosAlterados} alteraTab={alteraTab} setAlteraTab={setAlteraTab} setDadosAlterados={setDadosAlterados} changeTab={changeTab} controlEditOrCreate={controlEditOrCreate} />
                </TabPanel>
                <TabPanel value={tabAtual} index={1}>
                    <Visual dadosAlterados={dadosAlterados} alteraTab={alteraTab} setAlteraTab={setAlteraTab} setDadosAlterados={setDadosAlterados} changeTab={changeTab} controlEditOrCreate={controlEditOrCreate} />
                </TabPanel>
                <TabPanel value={tabAtual} index={2}>
                    <Seguranca  dadosAlterados={dadosAlterados}  alteraTab={alteraTab} setAlteraTab={setAlteraTab} setDadosAlterados={setDadosAlterados} changeTab={changeTab} controlEditOrCreate={controlEditOrCreate} />
                </TabPanel>  
                <TabPanel value={tabAtual} index={3} className={classes.gruposTab}>
                    <Grupos  dadosAlterados={dadosAlterados}  alteraTab={alteraTab} setAlteraTab={setAlteraTab} setDadosAlterados={setDadosAlterados} changeTab={changeTab} controlEditOrCreate={controlEditOrCreate} />
                </TabPanel>  
                <TabPanel value={tabAtual} index={4}>
                    <Categorizacoes  dadosAlterados={dadosAlterados}  alteraTab={alteraTab} setAlteraTab={setAlteraTab} setDadosAlterados={setDadosAlterados} changeTab={changeTab} controlEditOrCreate={controlEditOrCreate} />
                </TabPanel> 
                {temControles && <TabPanel value={tabAtual} index={5}>
                    <ControlsTab  dadosAlterados={dadosAlterados}  alteraTab={alteraTab} setAlteraTab={setAlteraTab} setDadosAlterados={setDadosAlterados} changeTab={changeTab} controlEditOrCreate={controlEditOrCreate} telaAtual="EVE" />
                </TabPanel>}
                </> 
              } 
              
              {error && <Error error={error} carregar={false} alertMessage={error?.message}  showAlert={false} duration={6000} /> }
              {errorSave && <Error error={errorSave} carregar={() => handleSave()} alertMessage={errorSave?.message}  showAlert={false} duration={6000} />}
              
          </div>

          <Box className={classes.marginButtons} >
            <ButtonCancel  onClick={close}  style={{marginRight: theme.spacing(.5)}} variant="contained" disabled={loadingSave}> 
                Cancelar
            </ButtonCancel>

            <ButtonSuccess  autoFocus onClick={handleSave}  variant="contained" disabled={loadingSave || !isFormEdited}> 
              {loadingSave && <CircularProgress size={15} /> }  {labelSave ? labelSave: 'Salvar' } 
            </ButtonSuccess>
          </Box>

        </Box>
    );
}