import {
  useEffect,
  useState
} from "react";

// material-ui
import {
  Button,
  Stack,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  FormLabel,
  Autocomplete,
  TextField,
  Grid
} from '@mui/material';

import * as ComboData from "utils/ComboData";
import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup';

const StatusChangeDialog = (props) => {
  const [content, setContent] = useState();
  const [dialogTitle, setDialogTitle] = useState("Confirm");
  const [prositiveBtnText, setPrositiveBtnText] = useState("Confirm");
  const [remarks, setRemarks] = useState("");
  const [helperText, setHelperText] = useState("");
  const [comboInputValue, setComboInputValue] = useState({});
  const groupTitleComboList = ComboData.groupTitle;

  useEffect(() => {
    setComboInputValue({});
    if (props.getStatus == "genGazetteCode") {
      setDialogTitle("Gen Gazette Code");
      setPrositiveBtnText("Submit");
      return getGazetteCodeContent()
    } else if (props.getStatus == "notAccepted") {
      setDialogTitle("Not Accept Reason");
      setPrositiveBtnText("Mark Not Accept");
      return getNotAcceptedContent();
    }if (props.getStatus == "resubmit") {
      setDialogTitle("Re-Submit Reason");
      setPrositiveBtnText("Mark Re-Submit");
      return getNotAcceptedContent();
    }if (props.getStatus == "paid") {
      setDialogTitle("Action Confirm");
      setPrositiveBtnText("Confirm");
      return getConfirmContent("Are you sure to mark this application as paid?");
    } else {
      setDialogTitle("Action Confirm");
      setPrositiveBtnText("Confirm");
      let str = "Do you want to set the application status to '" + props.getStatus + "'?"
      return getConfirmContent(str);
    }
  }, [props.getStatus]);

  const acceptedHandle = () => () => {
    const getStatus = props.getStatus.status;
    if (getStatus == "notAccepted") {
      if (!remarks || remarks == "")
        setHelperText("Please enter reason");
    }
    if (!helperText) {
      props.setReason({ "reason": remarks });
      if (remarks != null && remarks != "") {
        // console.log(remarks)
        // props.setStatusWindowAccepted(true);
      }
    }
    if (getStatus != "notAccepted") {
      props.setStatusWindowAccepted(true);
    }
  };


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


  const getConfirmContent = (text) => {
    setContent(<Grid container direction="row" justifyContent="center" alignItems="center">
      <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
        <Typography variant="h5">{text}</Typography>
      </FormLabel>
    </Grid>);
  }

  const getNotAcceptedContent = () => {
    setContent(<Grid container direction="row" justifyContent="center" alignItems="center">
      <Grid item xs={12} md={12} lg={12}>

        <TextField
          multiline
          fullWidth
          rows={6}
          placeholder="Please enter reason"
          helperText={helperText}
          onChange={(newValues) => {
            setRemarks(newValues.target.value);
            setHelperText("");
          }}
          variant="outlined"
          InputProps={
            {
              style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
            }
          }
        />
      </Grid>
    </Grid>
    );
  }

  const getGazetteCodeContent = () => {
    setContent(<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 variant="h5">Target Issue:</Typography>
          </Grid>
          <Grid item xs={12} md={9} lg={9}>
            <FormLabel>
              <Typography variant="h5">{props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate}</Typography>
            </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 variant="h5">Gazette Group:</Typography>
          </Grid>
          <Grid item xs={12} md={9} lg={9}>
            <Autocomplete
              disablePortal
              id="gazetteGroup"
              options={groupTitleComboList}
              filterOptions={(options) => options}
              inputValue={comboInputValue.label}
              onChange={(event, newValue) => {
                if (newValue != null && newValue != {}) {
                  // console.log(comboInputValue)
                  props.setSelectedGazetteGroupInputType(newValue.label);
                  setComboInputValue(newValue);
                  props.setSelectedGazetteGroup(newValue);
                  formik.setFieldValue("", "")
                } else {
                  gazetteGroup
                  props.setSelectedGazetteGroupInputType("");
                }
              }}
              sx={{
                  '& .MuiInputBase-root': { alignItems: 'center' },
                  '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                  '& .MuiOutlinedInput-root': { height: 40 }
              }}
              // sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
              renderInput={(params) => <TextField {...params} placeholder="" />}
            />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
    );
  }

  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">
                {dialogTitle}
              </Typography>
            </Stack>
          </Grid>
        </Grid>
      </DialogTitle>
      <FormikProvider value={formik}>
        <form>
          <DialogContent>
            <DialogContentText>
              {content}
            </DialogContentText>
          </DialogContent>
        </form>
      </FormikProvider>
      <Stack direction="row" justifyContent="space-around">
        <DialogActions>
          <Button variant="contained" onClick={props.handleClose} autoFocus >
            <Typography variant="h5">
              Cancel
            </Typography>
          </Button>
        </DialogActions>
        <DialogActions>
          <Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus disabled={Object.keys(props.selectedGazetteGroup).length === 0 && props.getStatus === "genGazetteCode"}>
            <Typography variant="h5">
              {prositiveBtnText}
            </Typography>
          </Button>
        </DialogActions>
      </Stack>
    </Dialog>
  );
};

export default StatusChangeDialog;