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

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

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

    return (
      <div>
        <header>Header</header>
        <div className="flex items-center">
          <input type="text"
              placeholder="Username"
              className="px-3 py-2 bg-white
                  placeholder-gray-300 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 hover:shadow-lg
                          outline-none focus:outline-none
                          ease-linear transition-all duration-150"
                  type="button"
                  onClick={() => login()}>Login</button>
        </div>
        <footer>Footer</footer>
      </div>
    )
}