import { TextField } from "@mui/material";
import { LenConstraint } from "../../api/ServerApi";

/**
 * Text input property edition
 */
export function TextInput(p: {
  label?: string;
  editable: boolean;
  value?: string;
  onValueChange?: (newVal: string | undefined) => void;
  size?: LenConstraint;
  checkValue?: (s: string) => boolean;
  multiline?: boolean;
  minRows?: number;
  maxRows?: number;
  type?: React.HTMLInputTypeAttribute;
  style?: React.CSSProperties;
  helperText?: string;
  disabled?: boolean;
  endAdornment?: React.ReactNode;
}): React.ReactElement {
  if (!p.editable && (p.value ?? "") === "") return <></>;

  let valueError = undefined;
  if (p.value && p.value.length > 0) {
    if (p.size?.min && p.type !== "number" && p.value.length < p.size.min)
      valueError = "Invalid value size";
    if (p.checkValue && !p.checkValue(p.value)) valueError = "Invalid value!";
    if (
      p.type === "number" &&
      p.size &&
      (Number(p.value) > p.size.max || Number(p.value) < p.size.min)
    )
      valueError = "Invalide size range!";
  }

  return (
    <TextField
      disabled={p.disabled}
      label={p.label}
      value={p.value ?? ""}
      onChange={(e) =>
        p.onValueChange?.(
          e.target.value.length === 0 ? undefined : e.target.value
        )
      }
      slotProps={{
        htmlInput: {
          maxLength: p.size?.max,
        },
        input: {
          readOnly: !p.editable,
          type: p.type,
          endAdornment: p.endAdornment,
        },
      }}
      variant={"standard"}
      style={p.style ?? { width: "100%", marginBottom: "15px" }}
      multiline={p.multiline}
      minRows={p.minRows}
      maxRows={p.maxRows}
      error={valueError !== undefined}
      helperText={valueError ?? p.helperText}
    />
  );
}