<template>
    <div>
        <template v-for="lobby in lobbies">
            <v-card v-if="lobby.isActive" flat :key="lobby.id" :loading="loading">
                <div class="d-flex flex-row justify-content-between">
                    <div>
                        <v-card-title>{{lobby.name}}</v-card-title>

                        <v-card-text>
                            <div>{{lobby.description || 'No description available.'}}</div>
                        </v-card-text>
                    </div>
                </div>

                <v-divider class="mx-4"></v-divider>

                <v-list dense v-if="meetingListFiltered(lobby).length">
                    <v-container class="overflow-y-auto px-0 pt-0">
                        <v-subheader class="d-flex flex-row justify-content-between">
                            <span>Meetings ({{meetingListFiltered(lobby).length}})</span>
                        </v-subheader>
                    </v-container>
                    <v-container style="height: 210px" class="overflow-y-auto">
                        <v-row>
                            <v-list-item-group class="w-100" v-model="lobby.selected_meeting" color="primary">
                                <v-list-item v-for="(item, i) in meetingListFiltered(lobby)" :key="i" :value="item">
                                    <v-list-item-icon>
                                        <v-icon v-text="'mdi-clock'"></v-icon>
                                    </v-list-item-icon>
                                    <v-list-item-content>
                                        <v-list-item-title v-text="item.name"></v-list-item-title>
                                        <v-tooltip top v-if="item.pros_online.length > 0">
                                            <template v-slot:activator="{ on }">
                                                <v-list-item-subtitle v-on="on" v-text="item.pros_online.length > 0 ? `PROs Connected (${item.pros_online.length})` : 'No PROs Connected'"></v-list-item-subtitle>
                                            </template>
                                            <span v-for="pro in item.pros_online" :key="pro.UID">
                                                {{pro.name}}
                                                <br />
                                            </span>
                                        </v-tooltip>
                                        <v-list-item-subtitle v-else v-text="item.pros_online.length > 0 ? `PROs Connected (${item.pros_online.length})` : 'No PROs Connected'"></v-list-item-subtitle>
                                    </v-list-item-content>
                                    <v-list-item-action>
                                        <v-list-item-action-text :class="{'status':true, 'is-active':item.active_members.length > 0}" v-text="'Online: ' + item.active_members.length"></v-list-item-action-text>
                                    </v-list-item-action>
                                </v-list-item>
                            </v-list-item-group>
                        </v-row>
                    </v-container>
                </v-list>

                <v-list v-else>
                    <v-subheader class="d-flex flex-row justify-content-between">
                        <span>Meetings ({{meetingListFiltered(lobby).length}})</span>
                    </v-subheader>
                    <v-container style="height: 210px" class="overflow-y-auto">
                        <v-row>
                            <v-list-item-group class="w-100 text-center" color="primary">
                                <v-list-item>
                                    <v-list-item-content>
                                        <v-list-item-title muted v-text="'No Meetings found for this lobby.'"></v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list-item-group>
                        </v-row>
                    </v-container>
                </v-list>

                <transition-expand>
                    <div v-if="meetingListFiltered(lobby).length">
                        <v-divider class="mx-4"></v-divider>

                        <v-card-actions>
                            <v-btn :disabled="loading || (lobby.selected_meeting !== 0 && !lobby.selected_meeting)" color="deep-purple accent-4" text @click="joinMeeting(lobby)">Join</v-btn>
                            <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="inviteToMeeting(lobby)">Invite</v-btn>
                            <v-spacer></v-spacer>
                            <v-btn :disabled="loading || (lobby.selected_meeting !== 0 && !lobby.selected_meeting)" color="deep-purple accent-4" text @click="closeMeeting(lobby)">Close</v-btn>
                        </v-card-actions>
                    </div>
                </transition-expand>
            </v-card>
        </template>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    data() {
        return {
            loading: false
        };
    },
    computed: {
        ...mapState(["lobbies", "user", "meeting"])
    },
    methods: {
        meetingListFiltered(lobby) {
            let visibilityLevel = lobby.lobbyProAccessLevel;
            let meetings = lobby.meetings;

            if (!visibilityLevel) {
                return [];
            }

            switch (visibilityLevel) {
                case "FREE_FOR_ALL":
                    return meetings.filter(x => x.active_members.length > 0);
                case "VISIBLE_IF_UNATTENDED":
                    return meetings.filter(x => x.active_members.length > 0 && (x.pros_online.length == 0 || x.pros_online.findIndex(y => y.uid == this.user.uid) !== -1));
                case "SYSTEM_CONTROLLED_BY_LOBBY_CALL":
                    return [];
            }
        },
        joinMeeting(lobby) {
            this.loading = true;
            $.ajax({
                url: "/post-to-api-ajax",
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                dataType: "json",
                data: {
                    _api: "/api/meeting/joinAsPro",
                    uid: lobby.selected_meeting.uid
                },
                success: data => {
                    if (!data.success) {
                        alert(data.message);
                        return;
                    }
                    if (this.meeting.uid === lobby.selected_meeting.uid) {
                        this.$eventBus.$emit("meetingRejoin");
                    } else {
                        lobby.selected_meeting.lobby = lobby.name;
                        this.$store.commit("setCurrentMeeting", { lobby_uid: lobby.uid, lobby_name: lobby.name, ...lobby.selected_meeting });
                    }
                },
                error: jXhr => {},
                complete: () => {
                    this.loading = false;
                }
            });
        },
        closeMeeting(lobby) {
            this.loading = true;
            $.ajax({
                url: "/post-to-api-ajax",
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                dataType: "json",
                data: {
                    _api: "/api/meeting/close",
                    uid: lobby.selected_meeting.uid
                },
                success: data => {
                    if (!data.success) {
                        alert(data.message);
                        return;
                    }
                },
                error: jXhr => {},
                complete: () => {
                    this.loading = false;
                }
            });
        }
    },
    mounted() {
        let self = this;

        this.$eventBus.$on("joinMeeting", function(data) {
            self.joinMeeting(data);
        });
    }
};
</script>