import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import React from "react";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
import CircleIcon from "@mui/icons-material/Circle";
import { returnStatusColor } from "../../Utils";
import UserLite from "../../../../api-bodies/UserLite";
import Status from "../../Status";
import { useAppSelector } from "../../../../redux/hooks";
import { selectUserStatus } from "../../../../redux/slices/meetingsAndUserStatusSlice";
import UserStatus from "../../../../api-bodies/UserStatus";

interface Props {
  contactInfo: UserLite;
  setContactSelected: (contactInfo: UserLite) => void;
}

const ContactItem: React.FC<Props> = (props) => {
  const userStatus: UserStatus | null = useAppSelector((state) =>
    selectUserStatus(state, props.contactInfo.uuid)
  );
  const status: Status =
    userStatus && userStatus.inMeeting ? Status.Online : Status.Offline;
  return (
    <ListItemButton
      onClick={() => {
        props.setContactSelected(props.contactInfo);
      }}
    >
      <ListItemIcon>
        <PersonOutlineIcon />
      </ListItemIcon>
      <ListItemText
        primary={props.contactInfo.name}
        secondary={status}
        sx={{ flexGrow: 1 }}
      />
      <CircleIcon color={returnStatusColor(status)} />
    </ListItemButton>
  );
};

export default ContactItem;