import {
  useEffect,
  useState
  } from "react";

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


const StatusChangeDialog = (props) => {
  const [status, setStatus] = useState("");
  // const [selectedGazetteGroupInputType, setSelectedGazetteGroupInputType] = useState("");
  const groupTitleComboList = ComboData.groupTitle;
  
  useEffect(() => {
    // console.log(Object.keys(!props.selectedGazetteGroup).length)
    if(props.getStatus == "accept"){
      setStatus("Accept")
    }else if (props.getStatus == "reject"){
      setStatus("Reject")
    }else if (props.getStatus == "complete"){
      setStatus("Complete")
    }else if (props.getStatus == "withdraw"){
      setStatus("Withdraw")
    }
  }, [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={'md'}
      >
        <DialogTitle >
          <Grid container>
            <Grid item>
              <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                <Typography variant="h4">
                  {status} Application
                </Typography>
              </Stack>
            </Grid>
          </Grid>
        </DialogTitle>
        <FormikProvider value={formik}>
            <form>
              <DialogContent>
                <DialogContentText>
                  {props.getStatus == "accept"?
                    <Grid container direction="row" justifyContent="center" alignItems="center">
                      <Grid item xs={12} md={8} lg={8} sx={{mb: 1,}}>
                          <Grid container alignItems={"center"}>
                              <Grid item xs={12} md={2} lg={3}
                                  sx={{display: 'flex', alignItems: 'center'}}>
                                  <Typography>Target Issue:</Typography>
                              </Grid>
                              <Grid item xs={12} md={9} lg={9}>
                                <FormLabel>
                                  {props.gazetteIssue+", "}{props.issueNum+", "}{props.issueDate}
                                </FormLabel>
                              </Grid>
                          </Grid>
                      </Grid>
                      <Grid item xs={12} md={8} lg={8} sx={{mb: 1,height:"180px"}}>
                          <Grid container alignItems={"center"}>
                              <Grid item xs={12} md={3} lg={3}
                                  sx={{display: 'flex', alignItems: 'center'}}>
                                  <Typography>Grazette Group:</Typography>
                              </Grid>
                              <Grid item xs={12} md={9} lg={9}>
                                <Autocomplete
                                    disablePortal
                                    id="gazetteGroup"
                                    options={groupTitleComboList}
                                    filterOptions={(options)=>options}
                                    inputValue={props.selectedGazetteGroupInputType}
                                    onChange={(event, newValue) => {
                                        if (newValue!=null && newValue != {}){
                                          props.setSelectedGazetteGroupInputType(newValue.label);
                                            props.setSelectedGazetteGroup(newValue);
                                            formik.setFieldValue("gazetteGroup","")
                                        }else{
                                          props.setSelectedGazetteGroupInputType("");
                                        }
                                    }}
                                    // sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                    renderInput={(params) => <TextField {...params} placeholder=""/>}
                                />
                              </Grid>
                          </Grid>
                      </Grid>
                    </Grid>:
                    <Grid container direction="row" justifyContent="center" alignItems="center">
                      <Grid item xs={12} md={5} lg={5} sx={{mb: 5,}}>
                        <FormLabel sx={{fontSize: "20px", color:"#000000",textAlign:"center"}}>
                            Are you really {status} the Application?
                        </FormLabel>
                      </Grid>
                    </Grid>                  
                  }
                </DialogContentText>
              </DialogContent>
            </form>
        </FormikProvider>
        <Stack direction="row" justifyContent="space-around">
          <DialogActions>
            <Button variant="contained"  onClick={props.handleClose} autoFocus >
              Cancel
            </Button>
          </DialogActions>
          <DialogActions>
            <Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus disabled={Object.keys(props.selectedGazetteGroup).length === 0&&status==="Accept"}>
              {status==="Accept"?"Confirm":status}
            </Button>
          </DialogActions>
        </Stack>
      </Dialog>
  );
};

export default StatusChangeDialog;