import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import Main from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import Create from '../components/rooms/Create';
import Refresh from '../components/rooms/Refrsh';
import RoomBlock from '../components/rooms/RoomBlock';
import { Room } from '../components/rooms/types';
import SocketContext from '../contexts/SocketContext';

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

  const refreshRooms = useCallback(() => {
    const rawMessage: RawMessage = {
      type: MessageType.ROOM_LIST_REQUEST,
      message: {}
    }
    socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
      if (response.ok) {
        setRooms(response.result!);
      } else {
        // 로그인하지 않고 방 목록으로 왔다고 판단
        history.push('/');
      }
    });
  }, []);

  useEffect(() => {
    // 뒤로가기 키로 빠져나오면 ping listener를 unsubscribe
    socket.off('ping');

    refreshRooms();
  }, []);

  return (
    <Main>
      <div className='mt-8 flex'>
        <Refresh refreshRooms={refreshRooms}/>
        <Create />
      </div>
      <div className='mt-auto w-screen flex flex-col items-center'>
        {
          rooms.length > 0 ?
          rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))
          : (<div className='text-lg'>There's no room at all.</div>)
        }
      </div>
    </Main>
  )
}

export default Rooms;