import React, { useState, useEffect } from "react";
import axios from "axios";

export const RoomItemsList = () => {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRoomsAndItems = async () => {
      try {
        const response = await axios.get(
          `${import.meta.env.VITE_API_URL}/room`,
        );
        const roomsWithItems = await Promise.all(
          response.data.map(async (room) => {
            const itemsResponse = await axios.get(
              `${import.meta.env.VITE_API_URL}/item?room=${room._id}`,
            );
            const itemsForThisRoom = itemsResponse.data.filter(
              (item) => item.room === room._id,
            );
            return { ...room, items: itemsForThisRoom };
          }),
        );
        setRooms(roomsWithItems);
      } catch (error) {
        console.error(error);
      }
    };
    fetchRoomsAndItems();
  }, []);

  return (
    <div>
      {rooms.map((room) => (
        <div key={room._id}>
          <h2>{room.name}</h2>
          {Array.isArray(room.items) &&
            room.items.map((item) => {
              return (
                <div key={item._id}>
                  <p>{item.brand}</p>
                  <p>{item.model}</p>
                  <p>{item.price}</p>
                </div>
              );
            })}
        </div>
      ))}
    </div>
  );
};