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;
}): 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" }}
    />
  );
}