<template>
    <div>
        <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 class="no-v-padding">
                    <v-expansion-panel-header>
                        <span>Meeting Room</span>
                        <v-spacer></v-spacer>
                        <v-btn :disabled="meetingLoading" v-if="meeting.uid" color="purple" small ripple outlined class="mr-3" @click.stop="leaveMeeting">Leave</v-btn>
                    </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>
        </v-app>
        <call-bubble></call-bubble>
    </div>
</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
        },
        meetingProp: {
            type: Object
        }
    },
    data() {
        return {
            active_panel: [0, 1, 2],
            lobbies_: []
        };
    },
    computed: {
        ...mapState(["user", "meeting", "lobbies", "meetingLoading"])
    },
    watch: {
        meeting: {
            handler(newVal, oldVal) {
                if (oldVal && oldVal.uid) {
                    this.$socket.emit("meetingLeft", { lobby_uid: oldVal.lobby_uid, meeting_name: oldVal.name, meeting_uid: oldVal.uid, user: this.user });
                }

                if (newVal && newVal.uid) {
                    this.$socket.emit("meetingJoined", { lobby_uid: newVal.lobby_uid, meeting_name: newVal.name, meeting_uid: newVal.uid, user: this.user });

                    this.$eventBus.$emit("updateMeetingMessages");
                    /* axios
                        .get(`/meeting/${this.meeting.id}/messages`)
                        .then(response => {
                            this.messages = response.data.map(cur => {
                                // cur.id = cur.message_id
                                cur.timestamp_formatted = timeago.format(cur.timestamp)

                                // cur.user = {
                                //     name: cur.name,
                                //     UID: cur.user_uid,
                                //     avatarFile: cur.avatarSrc || null
                                // }
                                cur.sent = this.user.UID == cur.user.UID ? true : false

                                // delete cur.message_id
                                // delete cur.name
                                // delete cur.user_uid

                                return cur
                            })
                        })
                        .catch(e => {
                            console.log(e)
                        }) */
                }
            }
        }
    },
    sockets: {
        incomingCall: function(data) {
            let self = this;

            this.$store.commit("setCall", data);
        },
        stopRing() {
            this.$store.commit("rejectCall");
        },
        disconnect: function() {
            this.$store.commit("nullifyMeetingsOnline");
        },
        reconnect: function() {
            this.$socket.emit("userData", {
                user: this.user,
                meeting: this.meeting,
                lobbies_uid_list: this.lobbies.reduce((acc, cur) => {
                    return [...acc, cur.uid];
                }, [])
            });

            if (this.meeting.uid) {
                this.$socket.emit("meetingJoined", { lobby_uid: this.meeting.lobby_uid, meeting_uid: this.meeting.uid, user: this.user });
            }
        },
        "call-data": function(data) {
            if (data.callData && data.state == null) {
                this.$store.commit("setCall", data.callData);
            }

            this.$socket.emit("lobbyDataRequest");
        },
        "lobby-data": function(data) {
            for (let meeting of data.meetings) {
                this.$store.commit("setLobbyActivity", meeting);
            }
        },

        /* Meeting Handlers */

        "meeting-activity": function(data) {
            console.log(data);
            this.$store.commit("setLobbyActivity", data);
        },
        "meeting-created": function(data) {
            this.$store.commit("addNewMeetingInLobby", data);
        },
        "meeting-updated": function(data) {
            this.$store.commit("setUpdatedMeetingInLobby", data);
        },
        "meeting-closed": function(data) {
            this.$store.dispatch("leaveMeeting");
        },

        /* Lobby Handlers */

        "lobby-updated": function(data) {
            this.$store.commit("updateLobby", data);
        },
        "lobby-activated": function(data) {
            this.$store.commit("activateLobby", data);
        },
        "lobby-deactivated": function(data) {
            this.$store.commit("deactivateLobby", data);
        },
        "lobby-created-for-pro": function(data) {
            this.$store.commit("addNewLobby", data);
        }
    },
    methods: {
        leaveMeeting() {
            this.$eventBus.$emit("leaveMeeting");
        }
    },
    mounted() {
        let lobbies = this.userProp.lobbies;
        delete this.userProp.lobbies;

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

        if (this.meetingProp) {
            let meeting = {
                uid: this.meetingProp.uid,
                lobby_uid: this.meetingProp.lobby ? this.meetingProp.lobby.uid : null,
                name: this.meetingProp.name,
                active_members: [],
                pros_online: []
            };
            this.$store.commit("setCurrentMeeting", meeting);
        }

        this.$socket.emit("userData", {
            user: this.userProp,
            meeting: this.meeting,
            lobbies_uid_list: lobbies.reduce((acc, cur) => {
                return [...acc, cur.uid];
            }, [])
        });

        this.$store.commit("setInitialUser", this.userProp);
        this.$store.commit("setLobbies", lobbies);
    }
};
</script>

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