import {
  useEffect,
  useState
  } from "react";

// material-ui
import {
  Button,
  // Link,
  Stack,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  FormLabel,
} from '@mui/material';
import { Grid } from "../../../../node_modules/@mui/material/index";
import { useFormik,FormikProvider } from 'formik';
import * as yup from 'yup';


const StatusChangeDialog = (props) => {
  const [status, setStatus] = useState("");
  
  useEffect(() => {
    console.log(Object.keys(!props.selectedGazetteGroup).length)
    if(props.getStatus == "cancel"){
      setStatus("取消")
    }
  }, [props.getStatus]);
  
  const acceptedHandle = () => () =>{
    // console.log(selectedGazetteGroup)
    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 >
          <Grid container>
            <Grid item>
              <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                <Typography variant="h4" color="error">
                  {status}公共啟事
                </Typography>
              </Stack>
            </Grid>
          </Grid>
        </DialogTitle>
        <FormikProvider value={formik}>
            <form>
              <DialogContent>
                <DialogContentText>
                  <Grid container direction="row" justifyContent="center" alignItems="center">
                      <Grid item xs={12} md={5} lg={5} sx={{mb: 5,}}>
                        <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}>
                          確定{status}公共啟事?
                        </FormLabel>
                      </Grid>
                    </Grid>   
                </DialogContentText>
              </DialogContent>
            </form>
        </FormikProvider>
        <Stack direction="row" justifyContent="space-around">
          <DialogActions>
            <Button variant="contained"  onClick={props.handleClose} autoFocus>
              取消
            </Button>
          </DialogActions>
          <DialogActions>
            <Button variant="contained"  color="error" onClick={acceptedHandle()} autoFocus >
              確定
            </Button>
          </DialogActions>
        </Stack>
      </Dialog>
  );
};

export default StatusChangeDialog;