import React, { useContext, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import SocketContext from './SocketContext';

interface room {
  uuid: string;
  name: string;
  currentUsers: number;
  maxUsers: number;
}

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

  useEffect(() => {
    socket.emit('room_list', ({ ok } : { ok: boolean }) => {
      if (ok) {
        history.push('/rooms');
      } else {
        console.error('login error!'); // TODO: 팝업 에러?
      }
    }); // TODO: interval마다 emit하거나 새로고침 버튼을 만들자

    // socket.on('')
  }, []);

  return (
    <div>
      <header>header header</header>
      <div className='flex items-center'>
        <div>room test</div>
      </div>
      <footer>footer footer</footer>
    </div>
  )
}