GeneIT/geneit_app/src/widgets/forms/MemberInput.tsx

import ClearIcon from "@mui/icons-material/Clear";
import { Autocomplete, IconButton, TextField, Typography } from "@mui/material";
import React from "react";
import { useNavigate } from "react-router-dom";
import { Member } from "../../api/MemberApi";
import { useFamily } from "../BaseFamilyRoute";
import { MemberItem } from "../MemberItem";

export function MemberInput(p: {
  editable: boolean;
  current?: number;
  onValueChange: (n?: number) => void;
  label: string;
  filter: (m: Member) => boolean;
}): React.ReactElement {
  const n = useNavigate();
  const family = useFamily();

  const choices = family.members.filter(p.filter);

  const [inputValue, setInputValue] = React.useState("");

  if (p.current) {
    const member = family.members.get(p.current)!;
    return (
      <div style={{ display: "flex", alignItems: "center" }}>
        <Typography variant="body2">{p.label}</Typography>
        <MemberItem
          member={member}
          onClick={
            !p.editable
              ? () => {
                  n(family.family.URL(`member/${member.id}`));
                }
              : undefined
          }
          secondary={
            p.editable ? (
              <>
                <IconButton
                  edge="end"
                  onClick={() => p.onValueChange(undefined)}
                >
                  <ClearIcon />
                </IconButton>
              </>
            ) : undefined
          }
        />
      </div>
    );
  }

  if (!p.editable) return <></>;

  return (
    <Autocomplete
      value={p.current ? family.members.get(p.current) : undefined}
      onChange={(_event: any, newValue: Member | null | undefined) => {
        p.onValueChange(newValue?.id);
      }}
      inputValue={inputValue}
      onInputChange={(_event, newInputValue) => {
        setInputValue(newInputValue);
      }}
      options={choices}
      sx={{ width: "100%" }}
      filterOptions={(options, state) =>
        options.filter((m) =>
          m?.fullName.toLowerCase().includes(state.inputValue)
        )
      }
      getOptionLabel={(o) => o?.fullName ?? ""}
      renderInput={(params) => <TextField {...params} label={p.label} />}
      renderOption={(_props, option, _state) => (
        <MemberItem
          member={option}
          onClick={() => p.onValueChange(option?.id)}
        />
      )}
    />
  );
}