import React, { useCallback, useContext, useState } from 'react';
import { useHistory } from 'react-router';
import Main from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import SocketContext from '../contexts/SocketContext';

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

    const login = useCallback(() => {
      const rawMessage: RawMessage = {
        type: MessageType.LOGIN,
        message: { nickname: username }
      }
      socket.emit('msg', rawMessage, (response : MessageResponse<string>) => {
        if (response.ok) {
          history.push({
            pathname: '/rooms',
            state: { username: response.result }
          });
        } else {
          console.error('login error!'); // TODO: 팝업 에러?
        }
      });
    }, [username]);

    return (
      <Main>
        <div className="mt-auto flex flex-col items-center">
          <img className="m-7" src="./logo192.png" alt='logo img' />
          <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>
      </Main>
    )
}

export default Login;