<template>
    <v-app>
        <v-expansion-panels v-model="active_panel" tile hover multiple>
            <v-expansion-panel class="no-v-padding">
                <v-expansion-panel-header>Lobby List</v-expansion-panel-header>
                <v-expansion-panel-content>
                    <lobby-list></lobby-list>
                </v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel>
                <v-expansion-panel-header>Meeting Room</v-expansion-panel-header>
                <v-expansion-panel-content>
                    <meeting-room></meeting-room>
                </v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel>
                <v-expansion-panel-header>Messenger</v-expansion-panel-header>
                <v-expansion-panel-content>
                    <messenger></messenger>
                </v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel>
                <v-expansion-panel-header>Settings</v-expansion-panel-header>
                <v-expansion-panel-content>
                    <settings></settings>
                </v-expansion-panel-content>
            </v-expansion-panel>
        </v-expansion-panels>
        <call-bubble :call="incomingCallDetails"></call-bubble>
    </v-app>
</template>

<script>
import { mapState } from "vuex";
import VueSocketIO from "vue-socket.io";
import SocketIO from "socket.io-client";

Vue.use(
    new VueSocketIO({
        debug: true,
        connection: SocketIO(process.env.MIX_SOCKET_SERVICE_URL)
    })
);

export default {
    props: {
        userProp: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            active_panel: [0, 1, 2],
            incomingCallDetails: null,
            lobbies: [
                {
                    lobbyUid: "1",
                    name: "Test Lobby",
                    description: null,
                    isStrangerAccessible: true,
                    isClientAccessible: true
                }
            ]
        };
    },
    computed: {
        ...mapState(["user"])
    },
    sockets: {
        incomingCall: function(data) {
            let self = this;

            if (!data.time_limit) {
                data.time_limit = 10;
            }

            self.incomingCallDetails = data;

            let timer = setInterval(() => {
                if (self.incomingCallDetails.time_limit > 0) {
                    self.incomingCallDetails.time_limit--;

                    if (self.incomingCallDetails.time_limit == 0) {
                        clearInterval(timer);
                        console.log("TIME IS OUT!");
                    }
                }
            }, 1000);
        }
    },
    methods: {
        //
    },
    mounted() {
        let lobbies = this.userProp.lobbies;
        delete this.userProp.lobbies;

        this.$socket.emit("userData", { user: this.userProp })

        lobbies.map(lobby => {
            lobby.selected_meeting = null
            lobby.meetings.map(meeting => {
                meeting.active_members = []
                meeting.pros_online = []
            })
        })

        this.$store.commit("setInitialUser", this.userProp)
        this.$store.commit("setLobbies", lobbies)

        this.$socket.emit("lobbyDataRequest", lobbies)

        this.sockets.subscribe("lobby-data", data => {
            for (let meeting of data.meetings) {
                this.$store.commit("setLobbyActivity", meeting)
            }
        })
    }
};
</script>

<style>
.v-expansion-panel--active {
    height: 100%;
}

.v-expansion-panel-content__wrap {
    padding: 24px 16px;
}
</style>