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

export const Login: React.FC<RouteComponentProps> = ({ history }) => {
    const socket = useContext(SocketContext);
    const [ username, setUsername ] = useState("");

    const login = () => {
      socket.emit(MessageType.LOGIN, username, (response : MessageResponse<null>) => {
        if (response.ok) {
          history.push('/rooms');
        } else {
          console.error('login error!'); // TODO: 팝업 에러?
        }
      });
    }

    return (
      <div className="flex flex-col items-center w-screen h-screen">
        <div className="mt-auto flex flex-col items-center">
          <img className="m-7" src="./logo192.png"/>
          <div>
            <input type="text"
                placeholder="Username"
                className="px-3 py-2 bg-white
                    placeholder-gray-400 text-gray-700 text-sm
                    rounded shadow outline-none focus:outline-none"
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
            <button className="bg-green-500 active:bg-green-600
                            text-white font-bold uppercase text-sm
                            px-5 py-2 ml-3 rounded shadow
                            outline-none focus:outline-none hover:shadow-md
                            ease-linear transition-all duration-100"
                    type="button"
                    onClick={() => login()}>Login</button>
          </div>
        </div>
        <Footer/>
      </div>
    )
}