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

/**
 * Couple / Member property edition
 */
export function PropEdit(p: {
  label: string;
  editable: boolean;
  value?: string;
  onValueChange?: (newVal: string | undefined) => void;
  size?: LenConstraint;
  checkValue?: (s: string) => boolean;
  multiline?: boolean;
  minRows?: number;
  maxRows?: number;
  helperText?: string;
}): React.ReactElement {
  if (((!p.editable && p.value) ?? "") === "") return <></>;

  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,
      }}
      variant={p.editable ? "filled" : "standard"}
      style={{ width: "100%", marginBottom: "15px" }}
      multiline={p.multiline}
      minRows={p.minRows}
      maxRows={p.maxRows}
      error={
        (p.checkValue &&
          p.value &&
          p.value.length > 0 &&
          !p.checkValue(p.value)) ||
        false
      }
      helperText={p.helperText}
    />
  );
}