import { useState } from "react";
import UserInfoModal from "./UserInfoModal";
import DeleteUser from "./DeleteUser";

/**
 * A list of users for admin manage users page, that sets an onClick
 * function for eact user <li> element, which displays a modul with
 * user info.
 * @param props - An array of users users to display
 * @returns {JSX.Element} The user list
 * @example
 * const users = [{ id: 1, userName: "ExampleName" }];
 * return <UserList users={users} />;
 */

export function UserListAdmin(props: { users: string[] }): JSX.Element {
  const [modalVisible, setModalVisible] = useState(false);
  const [username, setUsername] = useState("");

  const handleClick = (username: string): void => {
    setUsername(username);
    setModalVisible(true);
  };

  const handleClose = (): void => {
    setUsername("");
    setModalVisible(false);
  };

  return (
    <>
      <UserInfoModal
        manageMember={false}
        onClose={handleClose}
        onDelete={() => DeleteUser}
        isVisible={modalVisible}
        username={username}
      />
      <div>
        <ul className="font-bold underline text-[30px] cursor-pointer padding">
          {props.users.map((user) => (
            <li
              className="pt-5"
              key={user}
              onClick={() => {
                handleClick(user);
              }}
            >
              {user}
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}
