import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import roomApi from "../../apis/room.api";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";

const id = localStorage.getItem("user");
const INIT_ROOM = {
  roomId: "",
  name: "",
  profileimg: "",
  member: "",
};
const RoomSingle = () => {
  const [room, setRoom] = useState([INIT_ROOM]);
  const [error, setError] = useState("");
  const channelId = "main";
  const { roomId } = useParams(room.roomId);
  async function getJoinRoom(Id) {
    try {
      const User = await userApi.getUser(Id);
      const RoomNumArr = User.roomNumber;
      const Room = await roomApi.getRoom(RoomNumArr);
      let roomlist = [];
      for (let prop in Room) {
        roomlist.push({
          roomId: Room[prop].id,
          name: Room[prop].name,
          profileimg: Room[prop].profileimg,
          member: Room[prop].member.length,
        });
      }
      setRoom(roomlist);
    } catch (error) {
      catchErrors(error, setError);
    }
  }
  useEffect(() => {
    getJoinRoom(id);
  }, [id]);

  const { profileimg } = room;
  return (
    <div>
      {room &&
        room.map((el) => (
          <div>
            {room[0] === INIT_ROOM ? (
              <div></div>
            ) : (
              <Link
                to={`/room/${el.roomId}/${channelId}`}
                className="text-decoration-none text-dark"
                key={el.roomId}
              >
                <div
                  className="d-flex mx-4 my-2 p-2"
                  style={{ backgroundColor: "#C4C4C4" }}
                >
                  <div style={{ width: "37px", height: "37px" }}>
                    <img
                      src={`/roomUploads/${el.profileimg}`}
                      className="rounded-circle"
                      style={{ width: "37px", height: "37px" }}
                    />
                  </div>
                  <div
                    className="mx-3 mt-2"
                    style={{
                      width: "250px",
                      overflow: "scroll",
                      whiteSpace: "nowrap",
                      msOverflowStyle: "none",
                    }}
                  >
                    {el.name}
                  </div>
                  <div className="ms-auto mt-2"> {el.member}/100 </div>
                </div>
              </Link>
            )}
          </div>
        ))}
    </div>
  );
};

export default RoomSingle;