import { Typography } from "@mui/material";
import React from "react";
import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
import type { RoomEventsManager } from "../../utils/RoomEventsManager";
import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";

export function TypingNotice(p: {
  users: UsersMap;
  manager: RoomEventsManager;
}): React.ReactElement {
  const user = useUserInfo();

  const users = React.useMemo(
    () =>
      [...p.users.values()].filter(
        (u) =>
          p.manager.typingUsers.includes(u.user_id) &&
          u.user_id !== user.info.matrix_user_id
      ),
    [p.manager.typingUsers, p.users, user.info.matrix_user_id]
  );

  if (users.length === 0) return <></>;

  return (
    <Typography
      variant="caption"
      component="div"
      style={{ paddingLeft: "20px" }}
    >
      {users.map((u) => u.display_name ?? u.display_name).join(", ")}{" "}
      {users.length > 1 ? "are" : "is"} typing...
    </Typography>
  );
}