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

interface ReadyProps {
  isReady: boolean;
  isAdmin: boolean;
  isAllReady: boolean;
}

export const Ready: React.FC<ReadyProps> = ({ isReady, isAdmin, isAllReady }) => {
  const socket = useContext(SocketContext);
  const handleReady = useCallback(() => {
    if (isAdmin && isAllReady) {
      const rawMessage: RawMessage = {
        type: MessageType.ROOM_READY,
        message: {}
      }
      socket.emit('msg', rawMessage, () => {});
    } else {
      const rawMessage: RawMessage = {
        type: MessageType.ROOM_READY,
        message: { ready: !isReady }
      }
      socket.emit('msg', rawMessage, () => {});
    }
  }, []);

  return (
    <button className={`${isAdmin ? isAllReady ? 'bg-green-500' : 'bg-gray-400'
                            : isReady ? 'bg-green-600'
                            : '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={() => {}}>{isAdmin ? 'Start' : 'Ready'}</button>
  );
}