import { useCallback, useContext, useEffect, useState } from 'react';
import { Badge, Layout, Row, Col, Space, Typography, Button, message, Statistic } from 'antd';
import { PauseCircleOutlined, PlaySquareOutlined } from '@ant-design/icons';
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { useLocation } from 'wouter';

import { GameContext } from '../context/store';
import { StashManagementProvider } from '../context/stashManagementContext';

import StashManagementDrawer from '../components/StashManagementDrawer';
import Player from '../components/Player';
import Hand from '../components/Hand';
import Prompt from '../components/Prompt';

const { Content } = Layout;
const { Title } = Typography;

const PlayRoomPage = ({ params }) => {
    const roomId = params.roomId;
    const { state, dispatch } = useContext(GameContext);
    const [, setLocation] = useLocation();
    const fullScreenHandle = useFullScreenHandle();

    const [isRoomOwner, setIsRoomOwner] = useState(false);
    const [thisPlayerHand, setThisPlayerHand] = useState([]);
    const [thisPlayerPrompt, setThisPlayerPrompt] = useState([]);
    const [thisPlayerScore, setThisPlayerScore] = useState();

    useEffect(() => {
        console.log('Room id:', roomId);
        console.log('Global state:', state);
        console.log('Current user:', state.session?.display_name, state.session?.user_id);

        const joinRoom = async () => {
            if (state.room === null) {
                console.log('Room not joined yet:', state.gameState.user_id, state.gameState.display_name);
                try {
                    const room = await state.client.joinById(roomId, {
                        user_id: state.session?.user_id,
                        display_name: state.session?.display_name
                    });
                    dispatch({ type: 'JOIN_ROOM', payload: room });
                } catch (error) {
                    message.error('Stanza non tovata');
                    setLocation('/');
                }
            } else {
                console.log('Registering room handlers');
                state.room.onStateChange((newState) => {
                    console.log('Room state changed:', newState);
                    dispatch({ type: 'GAME_STATE', payload: { ...newState } });
                    const isOwner = newState.roomOwner === state.session?.user_id;
                    setIsRoomOwner(isOwner);
                });

                state.room.onMessage('notification', (msg) => {
                    console.log('Message received from server:', msg);
                    const msg_type = msg.type || 'info';
                    message[msg_type](msg.text);
                });
            }
        };
        joinRoom();

        return () => {
            if (state.room) {
                console.log('Removing room listeners...');
                state.room.removeAllListeners();
                dispatch({ type: 'LEAVE_ROOM' });
            }
        }
    }, [state.room]);

    useEffect(() => {
        if (state.room === null) return;

        // Setting the current player reference
        const p = state.gameState.players.get(state.room.sessionId);
        if (p !== undefined) {
            console.log('Setting current player hand:', p, p.hand);
            setThisPlayerHand(p.hand);
            setThisPlayerPrompt(p.prompt);
            setThisPlayerScore(p.score);
        }
    }, [state.room, state.gameState]);

    const handleStartGame = useCallback(() => {
        state.room.send('admin', { command: 'start-game' });
    }, [state.room]);

    const handlePauseGame = useCallback(() => {
        state.room.send('admin', { command: 'pause-game' });
    }, [state.room]);

    const handleResumeGame = useCallback(() => {
        state.room.send('resume-game', {});
    }, [state.room]);

    return (
        <FullScreen handle={fullScreenHandle}>
            <StashManagementProvider>
                <Layout className='play-room'>
                    <Content>
                        <Row justify="center">
                            <Col flex="auto" className={`main-scene bg-${state.gameState.bg}`}>
                                {isRoomOwner && (
                                    <Space className="admin-commands">
                                        {!state.gameState.running && (
                                            <Button icon={<PlaySquareOutlined />} type="link" size="large" onClick={handleStartGame} />
                                        )}

                                        {(state.gameState.running && state.gameState.paused) && (
                                            <Button icon={<PlaySquareOutlined />} type="link" size="large" onClick={handleResumeGame} />
                                        )}

                                        {(state.gameState.running && !state.gameState.paused) && (
                                            <Button icon={<PauseCircleOutlined />} type="link" size="large" onClick={handlePauseGame} />
                                        )}
                                    </Space>
                                )}

                                {(state.gameState.running && !state.gameState.paused) && (
                                    <Space direction="vertical" align="center" style={{ width: '100%' }} size="large">
                                        <Statistic title="Piatto" value={state.gameState.pot} />

                                        <Space direction="horizontal" align="baseline" split="VS" size="large" className="the-ring">
                                            <div className="player">
                                                <div className="picture" id="player">
                                                    <div className="badges">
                                                        <Player player={state.gameState.player1} displayAdminMenu={false} />
                                                        <div className="lives">
                                                            <i className="fas fa-heart" title="1 Vita"></i>
                                                            <i className="fas fa-heart" title="1 Vita"></i>
                                                            <i className="fas fa-heart" title="1 Vita"></i>
                                                        </div>

                                                        <div className="status"></div>
                                                    </div>
                                                </div>
                                                <div className="name">
                                                    {state.gameState.player1.displayName} (Banco)
                                                {(state.gameState.player1.prompt && state.gameState.player1.prompt.visible) && (<Badge status="processing" />)}
                                                </div>
                                                <Hand cards={state.gameState.player1.hand} showHole={false} />
                                            </div>

                                            <div className="player">
                                                <div className="picture" id="player">
                                                    <Player player={state.gameState.player2} displayAdminMenu={false} />
                                                    <div className="badges">
                                                        <div className="lives">
                                                            <i className="fas fa-heart" title="1 Vita"></i>
                                                            <i className="fas fa-heart" title="1 Vita"></i>
                                                            <i className="fas fa-heart" title="1 Vita"></i>
                                                        </div>

                                                        <div className="status"></div>
                                                    </div>
                                                </div>
                                                <div className="name">
                                                    {state.gameState.player2.displayName}
                                                    {(state.gameState.player2.prompt && state.gameState.player2.prompt.visible) && (<Badge status="processing" />)}
                                                </div>
                                                <Hand cards={state.gameState.player2.hand} showHole={false} />
                                                <Statistic title="Scommessa" value={state.gameState.currentBet} />
                                            </div>
                                        </Space>
                                    </Space>
                                )}

                            </Col>
                            <Col className="players" xs={4} md={6} lg={8} xl={10}>
                                <Title level={4}>In gioco</Title>
                                <Space size={12} wrap>
                                    {Array.from<any>(state.gameState.players.values()).filter((player, index) => {
                                        return player.playing;
                                    }).map((player, index) => (
                                        <Player key={index} player={player} displayAdminMenu={isRoomOwner} />
                                    ))}
                                </Space>

                                <Title level={4}>Spettatori</Title>
                                <Space size={12} wrap>
                                    {Array.from<any>(state.gameState.players.values()).filter((player, index) => {
                                        return !player.playing;
                                    }).map((player, index) => (
                                        <Player key={index} player={player} displayAdminMenu={isRoomOwner} />
                                    ))}
                                </Space>
                            </Col>
                        </Row>

                        <Row>
                            <Col className="game-controls" span={24}>
                                <Space direction="vertical" style={{ width: "100%" }}>
                                    {/* <Button onClick={fullScreenHandle.enter}>Full screen</Button> */}
                                    <Row>
                                        <Col flex={2}>
                                            <Hand cards={thisPlayerHand} showHole={true} />
                                        </Col>
                                        <Col flex={2}>
                                            <Space direction="vertical">
                                                {thisPlayerHand.length > 0 && <Statistic title="Il tuo punteggio:" value={thisPlayerScore} />}
                                                <Prompt prompt={thisPlayerPrompt} />
                                            </Space>
                                        </Col>
                                    </Row>
                                </Space>
                            </Col>
                        </Row>
                        <StashManagementDrawer />
                    </Content>
                </Layout>
            </StashManagementProvider>
        </FullScreen >
    );
}

export default PlayRoomPage;