import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
} from "@mui/material";
import { useState, useEffect } from "react";

interface StatusChangeDialogProps {
  open: boolean;
  newStatus: string;
  reason: string;
  setReason: React.Dispatch<React.SetStateAction<string>>;
  handleClose: () => void;
  handleSave: () => void;
}

const StatusChangeDialog = ({
  open,
  newStatus,
  reason,
  setReason,
  handleClose,
  handleSave,
}: StatusChangeDialogProps) => {
  const [isValid, setIsValid] = useState(false);

  useEffect(() => {
    const noSpaces = reason.replace(/\s/g, ""); // remove all spaces
    const length = noSpaces.length;
    setIsValid(length >= 12 && length <= 400);
  }, [reason]);

  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Change Status</DialogTitle>
      <DialogContent>
        You want to change the status to <b>{newStatus}</b>. Please provide a
        reason for the change.
        <TextField
          label="Reason for change"
          variant="outlined"
          fullWidth
          multiline
          rows={4}
          value={reason}
          onChange={e => setReason(e.target.value)}
          helperText="Reason must be between 12 and 400 characters"
          sx={{ mt: 2 }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Cancel</Button>
        <Button variant="contained" onClick={handleSave} disabled={!isValid}>
          Save
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default StatusChangeDialog;