import { create_listener } from "./chat.js";

render_rooms_wrapper()

async function render_rooms_wrapper() {
    const room_info = await request_rooms();
    console.log(room_info);
    render_rooms(room_info);
}

function render_rooms(room_info) {
    const roomsContainer = document.getElementById('rooms');
    roomsContainer.innerHTML = '';

    const tabBar = document.createElement('div');
    tabBar.className = 'tab-bar';
    roomsContainer.appendChild(tabBar);

    const contentContainer = document.createElement('div');
    contentContainer.className = 'room-content-container';
    roomsContainer.appendChild(contentContainer);

    room_info.forEach(([roomId, pubkey], index) => {
        // tab button
        const tabButton = document.createElement('button');
        tabButton.className = 'tab-button';
        tabButton.textContent = roomId;
        tabButton.dataset.roomId = roomId;
        tabButton.addEventListener('click', () => openRoom(roomId));
        tabBar.appendChild(tabButton);

        // room content
        const roomDiv = document.createElement('div');
        roomDiv.id = `room-${roomId}`;
        roomDiv.className = 'room-content';

        // public key textarea
        const pubKeyText = document.createElement('textarea');
        pubKeyText.value = pubkey;
        pubKeyText.readOnly = true;
        roomDiv.appendChild(pubKeyText);

        // messages list
        const messagesUl = document.createElement('ul');
        messagesUl.id = `messages-${roomId}`;
        messagesUl.className = `key-${pubkey}`;
        roomDiv.appendChild(messagesUl);

        // message form
        const form = document.createElement('form');
        form.id = `form-${roomId}`;
        form.className = `key-${pubkey}`;

        const input = document.createElement('input');
        input.id = `input-${roomId}`;
        input.className = `key-${pubkey}`;
        input.autocomplete = 'off';

        const button = document.createElement('button');
        button.textContent = 'Send';

        form.appendChild(input);
        form.appendChild(button);
        roomDiv.appendChild(form);
        contentContainer.appendChild(roomDiv);

        // show first room by default
        if (index === 0) {
            roomDiv.style.display = 'block';
            tabButton.classList.add('active');
        } else {
            roomDiv.style.display = 'none';
        }

        create_listener(form, input);
    });
}

// handle tab switching
function openRoom(roomId) {
    const roomIdStr = String(roomId);

    document.querySelectorAll('.room-content').forEach(div => {
        div.style.display = 'none';
    });
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('active');
    });

    const roomDiv = document.getElementById(`room-${roomIdStr}`);
    const tabButton = document.querySelector(`.tab-button[data-room-id="${roomIdStr}"]`);

    if (roomDiv && tabButton) {
        roomDiv.style.display = 'block';
        tabButton.classList.add('active');
    }
}

async function request_rooms() {
    const apiUrl = '/chat/rooms';
    const response = await fetch(apiUrl, { method: 'GET' });
    const { rooms } = await response.json();
    return rooms;
}