import React, { useContext, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { Footer } from '../components/common/Footer';
import { MessageResponse, MessageType } from '../components/common/types';
import { RoomInfo } from '../components/rooms/RoomInfo';
import { Room } from '../components/rooms/types';
import SocketContext from '../contexts/SocketContext';

export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
  const socket = useContext(SocketContext);
  const [ rooms, setRooms ] = useState<Room[]>([]);

  // for test
  const testingRoom1: Room = {
    uuid: '23525',
    name: 'Hello World!',
    currentUsers: 3,
    maxUsers: 4
  }
  const testingRoom2: Room = {
    uuid: '235252134',
    name: 'Bonjour World!',
    currentUsers: 6,
    maxUsers: 6
  }
  useEffect(() => {
    setRooms([testingRoom1, testingRoom2]);
    // refreshRooms()
  }, []);

  const refreshRooms = () => {
    socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
      if (response.ok) {
        setRooms(response.result!);
      } else {
        // TODO: 에러 핸들링
        console.log("방 목록을 수신하지 못함");
      }
    });
  }

  // useEffect(refreshRooms, []);

  return (
    <div className='flex flex-col items-center w-screen h-screen'>
      <div className='mt-auto w-screen flex flex-col items-center'>
        {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
      </div>
      <Footer />
    </div>
  )
}