import {
  FormControl,
  FormLabel,
  RadioGroup,
  FormControlLabel,
  Radio,
  Typography,
} from "@mui/material";
import { Sex } from "../api/MemberApi";

export function SexSelection(p: {
  readonly?: boolean;
  current?: Sex;
  onChange: (s: Sex) => void;
}): React.ReactElement {
  if (p.readonly) {
    if (p.current === undefined || p.current === null) return <></>;

    return (
      <Typography
        variant="body2"
        display="block"
        style={{ marginBottom: "15px" }}
      >
        Sexe : {p.current === "M" ? "Homme" : "Femme"}
      </Typography>
    );
  }

  return (
    <FormControl style={{ marginBottom: "15px" }}>
      <FormLabel id="sex-label">Sexe</FormLabel>
      <RadioGroup
        row
        aria-labelledby="sex-label"
        value={p.current}
        onChange={(e) => p.onChange(e.target.value as Sex)}
      >
        <FormControlLabel value="M" control={<Radio />} label="Homme" />
        <FormControlLabel value="F" control={<Radio />} label="Femme" />
      </RadioGroup>
    </FormControl>
  );
}