import { useQuery } from "convex/react";
import { useEffect, useState } from "react";
import { api } from "../../convex/_generated/api";
import { Doc } from "../../convex/_generated/dataModel";
import { RadioRoomLoader } from "./RadioRoom";
import { Room } from "./Room";

const Home = () => {
  const rooms = useQuery(api.rooms.get);

  const [selectedRoom, setSelectedRoom] = useState<Doc<"rooms"> | null>(null);

  useEffect(() => {
    if (rooms?.[0]) {
      setSelectedRoom(rooms[0]);
    }
  }, [!!rooms]);

  return (
    <div className="h-full flex">
      <div className="w-60">
        devjam
        {rooms?.map((room) => {
          return (
            <div
              onClick={() => setSelectedRoom(room)}
              className={`${
                selectedRoom?._id === room._id ? "bg-gray-800" : ""
              } p-2`}
              key={room._id}
            >
              {room.name}
            </div>
          );
        })}
      </div>
      <div className="flex-1 h-full">
        {selectedRoom ? (
          selectedRoom.type === "radio" ? (
            <RadioRoomLoader roomId={selectedRoom._id} />
          ) : (
            <Room roomId={selectedRoom._id} />
          )
        ) : null}
      </div>
    </div>
  );
};

export default Home;