import React, { useCallback, useContext, useState } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType, RawMessage } from '../common/types';
import { Room } from './types';

export const Create: React.FC = () => {
  const socket = useContext(SocketContext);
  const [ roomName, setRoomName ] = useState('');

  const createRooms = useCallback(() => {
    const rawMessage: RawMessage = {
      type: MessageType.ROOM_LIST_CREATE,
      message: { name: roomName }
    }
    socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
      if (response.ok) {
        // HOW?
      }
    });
  }, [roomName]);
  
  return (
    <div>
      <input type="text"
                placeholder="Username"
                className="px-3 py-1.5 bg-white
                    placeholder-gray-400 text-gray-700 text-sm
                    rounded shadow outline-none focus:outline-none"
                value={roomName}
                onChange={e => setRoomName(e.target.value)}
            />
      <button className="bg-green-500 active:bg-green-600
                            text-white uppercase text-xl
                            w-10 h-8 pb-0.5 ml-3 rounded shadow round
                            outline-none focus:outline-none hover:shadow-md
                            ease-linear transition-all duration-100"
                    type="button"
                    onClick={() => createRooms()}>+</button>
    </div>
  );
}