import {
  Box,
  Button,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  TextField,
} from "@mui/material";

export function TextInputDialog(p: {
  /**
   * Minimum amount of text that must be entered before the text can be validated
   */
  minLen?: number;

  /**
   * Max len of text than can be entered
   */
  maxLen?: number;

  /**
   * The title of the dialog
   */
  title?: string;

  /**
   * The message shown above the input dialog
   */
  text: string;

  /**
   * The label of the text field
   */
  label: string;

  /**
   * The current value in the dialog
   */
  value: string;

  /**
   * The type of value
   */
  type?: React.HTMLInputTypeAttribute;

  /**
   * Function called when the value entered by the user is changed
   */
  onValueChange: (v: string) => void;

  /**
   * Specify whether the value is being checked
   */
  isChecking?: boolean;

  /**
   * The message shown while the value is checked
   */
  checkingMessage?: string;

  /**
   * The text of the submit button
   */
  submitButton?: string;

  /**
   * Callback function called when the user click on the submit button
   */
  onSubmit: (value: string) => void;

  /**
   * Callback function called when the user click on the submit button
   */
  onCancel: () => void;

  /**
   * Specify whether the dialog should be open or not
   */
  open: boolean;

  /**
   * Callback function called when the user click outside the dialog
   */
  onClose: () => void;

  /**
   * Error message to show on the input text
   */
  error?: string;

  /**
   * If set to true (the default), when an error is set, the submit button will be disabled
   */
  errorIsBlocking?: boolean;
}): React.ReactElement {
  const canSubmit =
    p.value.length >= (p.minLen ?? 0) &&
    (p.errorIsBlocking === false || p.error === undefined);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!canSubmit) return;

    p.onSubmit(p.value);
  };

  return (
    <Dialog open={p.open} onClose={p.onClose}>
      <Box component="form" noValidate onSubmit={handleSubmit}>
        {p.title && <DialogTitle>{p.title}</DialogTitle>}
        <DialogContent>
          <DialogContentText>{p.text}</DialogContentText>
          <TextField
            disabled={p.isChecking}
            autoFocus
            margin="dense"
            label={p.label}
            type={p.type ?? "text"}
            fullWidth
            variant="standard"
            value={p.value}
            onChange={(e) => p.onValueChange(e.target.value)}
            inputProps={{ maxLength: p.maxLen ?? 255 }}
            error={p.error !== undefined}
            helperText={p.error}
          />

          {p.isChecking && (
            <span>
              <CircularProgress size={15} />{" "}
              {p.checkingMessage ?? "Contrôle en cours..."}
            </span>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={p.onClose}>Annuler</Button>
          <Button disabled={!canSubmit} type="submit">
            {p.submitButton ?? "Valider"}
          </Button>
        </DialogActions>
      </Box>
    </Dialog>
  );
}