<template lang="pug">
    #app
        Spinner(v-if="isFetching" size="huge").spinner
        .error(v-else-if="!isFetching && skunBugDown") {{ skunBugDown }}
        .container(v-else-if="!isFetching && !gameStarted")
            .room-data
                .room-box
                    .room-fs
                        router-link(:to=" { name: 'Room', params: { id: roomID, name: roomName }}").link Invite link (RMB)
                    .room-sb link
                .room-box
                    .room-fs {{ roomName }}
                    .room-sb name
                .room-box
                    .room-fs {{ creatorNick }}
                    .room-sb creator
                .room-box
                    .room-fs {{ spaceLimit }}
                    .room-sb slots left
                .room-box
                    .listed.room-fs(@click="changeListedState") {{ isListed }}
                    .room-sb listed
            .room-container
                Chat(:messages="messages").chat
                .room-clients
                    .room-client(v-for="client in clients")
                        .client-points {{ client.currentPoints }}
                        div(:class="[client.nick === nick ? 'client-nick-you' : '', 'client-nick']")
                            router-link(:to="{ name: 'Profile', params: { id: client.nick } }" target="_blank") {{ client.nick }}
            .start-button
                button(v-if="isCreator" @click="startGame").btn START A GAME
                .start-info(v-else) Game will start soon
        Game(v-if="gameStarted && !waitingForPlayers" :questions="questions" @gamedone="gameHasEnded")
        .waiting-box(v-if="waitingForPlayers")
            Spinner(size="large").waiting-spinner
            .waiting-title Waiting for other players
            .waiting-score-box
                .waiting-score-title Your total score
                .waiting-score {{ points }}
</template>

<script>
    import Spinner from '../../components/Spinner';
    import Game from './components/Game';
    import Chat from './components/Chat';
    import Type from '../../enums/Type';
    import Error from '../../enums/Error';
    import { EventBus } from '../../EventBus/EventBus';

    export default {
        name: 'Room',
        components: {
            Spinner,
            Game,
            Chat
        },
        data() {
            return {
                isFetching: true,
                socket: null,
                exists: false,
                roomName: null,
                roomID: null,
                clients: [],
                spaceLimit: null,
                isCreator: false,
                questions: [],
                gameStarted: false,
                waitingForPlayers: false,
                creatorNick: null,
                skunBugDown: null,
                nick: null,
                messages: [],
                isListed: true
            }
        },
        created() {
            const socket = new WebSocket('ws://'+this.$ptw+':8080');
            const roomID = this.$route.params.id;
            EventBus.socket = socket;
            EventBus.room.id = roomID;
            const token = this.$cookie.get('mathimeauth');
            this.socket = socket;
            socket.onopen = () => {
                socket.send(
                    JSON.stringify({
                        type: Type.EXISTS,
                        roomID: roomID,
                        token: token
                    })
                );
            }

            socket.onmessage = (msg) => {
                const response = JSON.parse(msg.data);
                if (response.error === Error.ROOMLOADFAILED) {
                    this.skunBugDown = Error.ROOMDOESNOTEXIST;
                    this.isFetching = false;
                }
                else if (response.error === Error.USERNOTFOUND) {
                    this.skunBugDown = Error.USERDOESNOTEXIST;
                    this.isFetching = false;
                }
                if (response.type === Type.EXISTS) {
                    this.exists = true;
                    this.roomName = response.room.roomName;
                    this.roomID = response.room.roomID;
                    this.clients = response.room.clients;
                    this.spaceLimit = response.spaceLimit;
                    this.creatorNick = response.creatorNick;
                    this.nick = response.nick;
                    if (response.creator)
                        this.isCreator = true;
                    this.isFetching = false;

                    EventBus.$emit('LOGGED_IN', this.nick);
                }
                else if (response.type === Type.GAMEINIT) {
                    if (response.error) {
                        return; //error cos z pytaniami
                    }
                    this.questions = response.questions;
                    this.gameStarted = true;
                }
                else if (response.type === Type.CLIENTSUPDATE) {
                    if (response.error)
                        return;
                    this.clients = response.clients;
                    this.spaceLimit = response.spaceLimit;
                }
                else if (response.type === Type.GAMESTOP) {
                    if (response.error)
                        return; //?
                    this.clients = response.clients;
                    this.waitingForPlayers = false;
                    this.gameStarted = false;
                }
                else if (response.type === Type.UPDATECREATOR) {
                    if (response.error)
                        return;
                    this.isCreator = response.creator;
                    this.creatorNick = response.creatorNick;
                }
                else if (response.type === Type.NEWMESSAGE) {
                    this.messages = response.messages;
                }
                else if (response.type === Type.LISTED) {
                    this.isListed = response.isListed;
                }
            }
        },
        methods: {
            startGame() {
                this.socket.send(
                    JSON.stringify({
                        type: Type.GAMEINIT,
                        roomID: this.roomID
                    })
                );
            },
            gameHasEnded(result) {
                this.waitingForPlayers = true;
                this.points = result.points;
                this.socket.send(JSON.stringify({
                    type: Type.GAMESTOP,
                    roomID: this.roomID,
                    token: this.$cookie.get('mathimeauth'),
                    points: this.points,
                    correct: result.correct,
                    incorrect: result.incorrect
                }));
            },
            changeListedState() {
                if (!this.isCreator)
                    return;
                this.socket.send(JSON.stringify({
                    type: Type.LISTED,
                    roomID: this.roomID,
                    isListed: !this.isListed
                }));
            }
        },
        beforeDestroy() {
            this.socket.close();
        }
    }
</script>

<style scoped>

    .spinner, .container, .error {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .error {
        justify-content: center;
    }

    .room-data {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 2rem;
    }

    .room-box {
        width: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    .room-fs {
        font-weight: bold;
        color: var(--dec-0);
    }

    .room-sb {
        color: var(--dec-10);
        font-size: 0.8rem;
        margin-top: -.3rem;
    }

    .container {
        flex-flow: column;
    }

    .chat {
        max-width: 30%;
    }

    .room-clients {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .room-container {
        display: flex;
        flex-flow: row;
        width: 100%;
        height: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .room-client {
        display: flex;
        flex-flow: row;
        width: 50%;
        justify-content: center;
        align-items: center;
    }

    .client-points {
        cursor: pointer;
        padding: 1rem;
        background-color: var(--dec-10)
    }

    .client-nick, .client-nick-you {
        font-weight: bold;
        margin-left: 2rem;
        padding: 1rem;
        border-bottom: 1px solid var(--dec-10);
        cursor: default;
    }

    .client-nick-you {
        border-bottom: 1px solid var(--dec-0)
    }

    .btn {
        width: 30rem;
        height: 3rem;
        font-weight: bold;
        color: var(--dec-0);
        background-color: var(--dec-10);
        border: none;
        outline: none;
        cursor: pointer;
        transition-duration: 300ms;
    }

    .listed {
        cursor: pointer;
    }

    .btn:hover {
        background-color: var(--dec-8);
        transition-duration: 300ms;
    }

    a {
        text-decoration: none;
        color: var(--dec-0);
    }

    a:hover {
        color: var(--dec-1);
    }

    .waiting-box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
    }

    .waiting-score-box {
        margin-top: 5rem;
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    .waiting-score-title {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .waiting-score {
        color: var(--dec-10);
        font-weight: bold;
    }

    @media only screen and (max-width: 600px) {
        .room-data {
            flex-wrap: wrap;
        }
    }

</style>