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

/**
 * Couple / Member 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;
}): 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
      label={p.label}
      value={p.value ?? ""}
      onChange={(e) =>
        p.onValueChange?.(
          e.target.value.length === 0 ? undefined : e.target.value
        )
      }
      inputProps={{
        maxLength: p.size?.max,
      }}
      InputProps={{
        readOnly: !p.editable,
        type: p.type,
      }}
      variant={"standard"}
      style={{ width: "100%", marginBottom: "15px" }}
      multiline={p.multiline}
      minRows={p.minRows}
      maxRows={p.maxRows}
      error={valueError !== undefined}
      helperText={valueError}
    />
  );
}