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 [selectedGazetteGroup, setSelectedGazetteGroup] = useState({});
  // const [selectedGazetteGroupInputType, setSelectedGazetteGroupInputType] = useState("");
  const groupTitleComboList = ComboData.groupTitle;
  
  useEffect(() => {
    if(props.getStatus == "accepted"){
      onAcceptedClick()
    }else if (props.getStatus == "reject"){
      onRejectedClick()
    }else if (props.getStatus == "complete"){
      onComplatedClick()
    }else if (props.getStatus == "withdraw"){
      onWithdrawnClick()
    }
  }, [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">
                  Accept Application
                </Typography>
              </Stack>
            </Grid>
          </Grid>
        </DialogTitle>
        <FormikProvider value={formik}>
            <form>
              <DialogContent>
                <DialogContentText>
                    <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("checkDigit","")
                                        }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>
                </DialogContentText>
              </DialogContent>
            </form>
        </FormikProvider>
        <Stack direction="row" justifyContent="space-around">
          <DialogActions>
            <Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus>
              Accept
            </Button>
          </DialogActions>
          <DialogActions>
            <Button variant="contained"  onClick={props.handleClose} autoFocus>
              Cancel
            </Button>
          </DialogActions>
        </Stack>
      </Dialog>
  );
};

export default StatusChangeDialog;