<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">Groups</h1>
                <div class="row">
                    <div class="col-12 col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">My Groups</h5>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th class="d-none d-md-table-cell" style="width:25%">Members</th>
                                    <th style="width: 16em">
                                        <a @click="fetchGroups" class="align-middle">
                                            <b-icon-arrow-clockwise></b-icon-arrow-clockwise>
                                            Refresh
                                        </a>
                                        <router-link to="/groups/new" class="align-middle">
                                            <b-icon-plus></b-icon-plus>
                                            New group
                                        </router-link>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="group in groups" :key="group.id">
                                    <td>
                                        <router-link :to="`/groups/${group.id}`">{{ group.handle }}</router-link>
                                    </td>
                                    <td class="d-none d-md-table-cell">{{ group.members.length }}</td>
                                    <td class="table-action"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-12 col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Open group invites</h5>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Group</th>
                                    <th class="d-none d-md-table-cell" style="width:25%">Invited by</th>
                                    <th style="width: 16em">
                                        <a @click="fetchGroupInvites" class="align-middle">
                                            <b-icon-arrow-clockwise></b-icon-arrow-clockwise>
                                            Refresh
                                        </a>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="invite in groupInvites" :key="invite.id">
                                    <td>{{ invite.group }}</td>
                                    <td class="d-none d-md-table-cell">{{ invite.inviter }}</td>
                                    <td class="table-action">
                                        <button class="btn btn-sm btn-success" @click="tryAcceptInvite(invite)">
                                            <b-icon-check></b-icon-check>
                                            Accept
                                        </button> &nbsp;
                                        <button class="btn btn-sm btn-danger" @click="tryDeclineInvite(invite)">
                                            <b-icon-x></b-icon-x>
                                            Decline
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

<script>
import {mapActions, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";

export default {
    name: 'Groups',
    components: {
        BaseLayout,
        ...BIcons
    },
    computed: {
        ...mapState(['groups', 'groupInvites']),
    },
    methods: {
        ...mapActions(['fetchGroups', 'fetchGroupInvites', 'acceptGroupInvite', 'declineGroupInvite']),
        tryAcceptInvite(invite) {
            this.acceptGroupInvite(invite).then(() => {
                this.fetchGroupInvites()
                this.fetchGroups()
            }).catch(() => {
            })
        },
        tryDeclineInvite(invite) {
            this.declineGroupInvite(invite).then(() => {
                this.fetchGroupInvites()
            }).catch(() => {
            })
        }
    },
    mounted() {
        this.fetchGroups()
        this.fetchGroupInvites()
    }
}
</script>

<style scoped>
</style>
