import { mdiCross } from "@mdi/js";
import {
  ListItemAvatar,
  ListItemButton,
  ListItemSecondaryAction,
  ListItemText,
} from "@mui/material";
import { Member, fmtDate } from "../api/genealogy/MemberApi";
import { MemberPhoto } from "./MemberPhoto";
import Icon from "@mdi/react";
import FemaleIcon from "@mui/icons-material/Female";
import MaleIcon from "@mui/icons-material/Male";

export function MemberItem(p: {
  dense?: boolean;
  member?: Member;
  onClick?: () => void;
  secondary?: React.ReactElement;
}): React.ReactElement {
  return (
    <ListItemButton onClick={p.onClick} dense={p.dense}>
      <ListItemAvatar>
        <MemberPhoto member={p.member!} />
      </ListItemAvatar>
      <ListItemText
        primary={
          <>
            {p.member?.fullName}{" "}
            {p.member?.sex === "F" ? (
              <FemaleIcon fontSize="small" htmlColor="pink" />
            ) : (
              <MaleIcon fontSize="small" htmlColor="lightBlue" />
            )}{" "}
            {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
          </>
        }
        secondary={
          p.member?.dead
            ? `${fmtDate(p.member?.dateOfBirth)} - ${fmtDate(
                p.member?.dateOfDeath
              )}`
            : fmtDate(p.member?.dateOfBirth)
        }
      />
      {p.secondary && (
        <ListItemSecondaryAction>{p.secondary}</ListItemSecondaryAction>
      )}
    </ListItemButton>
  );
}