PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_Public/StatusChangeDialog.js

import {
  useEffect,
  useState,
  useRef
  } from "react";

// material-ui
import {
  Box,
  Button,
  // Link,
  Stack,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  CircularProgress,
} from '@mui/material';
import { useFormik,FormikProvider } from 'formik';
import * as yup from 'yup';
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import {FormattedMessage} from "react-intl";
import {useIntl} from "react-intl";

const StatusChangeDialog = (props) => {
  const [status, setStatus] = useState("");
  const intl = useIntl();
  const confirmOnceRef = useRef(false);

  useEffect(() => {
    // console.log(Object.keys(!props.selectedGazetteGroup).length)
    if(props.getStatus === "cancel"){
      setStatus(intl.formatMessage({id: 'cancel'}))
    }
  }, [props.getStatus]);

  useEffect(() => {
    if (!props.open) {
      confirmOnceRef.current = false;
    }
  }, [props.open]);

  const wasConfirmLoadingRef = useRef(false);
  useEffect(() => {
    if (wasConfirmLoadingRef.current && !props.confirmLoading) {
      confirmOnceRef.current = false;
    }
    wasConfirmLoadingRef.current = props.confirmLoading;
  }, [props.confirmLoading]);
  
  const acceptedHandle = () => () =>{
    if (props.confirmLoading) return;
    if (confirmOnceRef.current) return;
    confirmOnceRef.current = true;
    props.setStatusWindowAccepted(true)
  };

  
  const formik = useFormik({
      initialValues:({
          username:'',
      }),
      validationSchema:yup.object().shape({
      }),
  });

  // const handleReset = () => {
  //   setSelectedGazetteGroupInputType("")
  //   selectedGazetteGroup({});
  // };
  
  return (
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        fullWidth={true}
        maxWidth={'xs'}
      >
        <DialogTitle component="div">
          <Typography variant="h4" component="h2">
            {status} {intl.formatMessage({id: 'publicNotice'})}
          </Typography>
        </DialogTitle>
        <FormikProvider value={formik}>
            <form>
              <DialogContent>
                <DialogContentText component="div">
                  <Box sx={{ fontSize: '18px', color: '#000000', textAlign: 'center' }}>
                    <Typography variant="h5" component="p" sx={{ m: 0 }}>
                      {intl.formatMessage({id: 'confirmTo'})}{status} {intl.formatMessage({id: 'publicNoticeApp'})}?
                    </Typography>
                  </Box>
                </DialogContentText>
              </DialogContent>
            </form>
        </FormikProvider>
        <Stack direction="row" justifyContent="space-around" sx={{mb:2}}>
          <ThemeProvider theme={PNSPS_BUTTON_THEME}>
          <DialogActions>
            <Button
                variant="contained"
                onClick={props.handleClose}
                autoFocus
                color="cancel"
                disabled={props.confirmLoading}
            >
              <FormattedMessage id="cancel"/>
            </Button>
          </DialogActions>
          <DialogActions>
            <Button
                variant="contained"
                color="save"
                onClick={acceptedHandle()}
                autoFocus
                disabled={props.confirmLoading}
                startIcon={props.confirmLoading ? <CircularProgress color="inherit" size={20} /> : null}
            >
              <FormattedMessage id="confirm"/>
            </Button>
          </DialogActions>
          </ThemeProvider>
        </Stack>
      </Dialog>
  );
};

export default StatusChangeDialog;