import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';
import { LobyScreenProps } from '../types';
import { useEffect } from 'react';
import { CommonMancalaGame } from 'mancala.js';
import { channel_on_game_start } from '../const/channel_names';

export default function LobyScreen({ navigation, route }: LobyScreenProps) {

    const { context } = route.params;
    const { t } = useTranslation();

    const onGameStart = async (message: Object) => {
        const newGame: CommonMancalaGame = message as CommonMancalaGame;
        const userKey = await context.userKeyStore.getUserKey();
        navigation.navigate("Game", { context, gameId: newGame.id, userKey })
    }

    useEffect(() => {
        context.rtmt.addMessageListener(channel_on_game_start, onGameStart);
        context.rtmt.sendMessage("new_game", {});
        return () => {
            context.rtmt.removeMessageListener(channel_on_game_start, onGameStart);
        }
    }, []);

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>{t('SearchingOpponent')}</Text>
        </View>
    );
}