<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">{{ group ? group.handle : '' }}</h1>
                <div class="row" v-if="group">
                    <div class="col-12 col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Members</h5>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th style="width: 16em">
                                        <a @click="refresh" class="align-middle">
                                            <b-icon-arrow-clockwise></b-icon-arrow-clockwise>
                                            Refresh
                                        </a>
                                        <a @click="show_invite = true" class="align-middle">
                                            <b-icon-plus></b-icon-plus>
                                            Add member
                                        </a>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-if="show_invite">
                                    <td>
                                        <input type="text" class="form-control" placeholder="user@domain"
                                               v-model="invitee">
                                    </td>
                                    <td>
                                        <button class="btn btn-primary" @click="tryInvite">Invite</button>
                                    </td>
                                </tr>
                                <tr v-for="member in group.members" :key="member.id">
                                    <td>
                                        <user-name-tag :user="member"/>
                                    </td>
                                    <td class="table-action">
                                        <a href="#" class="align-middle" @click.prevent="tryRemoveMember(member)">
                                            <b-icon-trash></b-icon-trash>
                                            Remove
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-12 col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Group inventory</h5>
                                <button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
                                    <b-icon-list></b-icon-list>
                                </button>
                                <button v-else @click="layout = 'grid'" class="btn">
                                    <b-icon-grid></b-icon-grid>
                                </button>
                            </div>
                            <table class="table table-striped" v-if="layout === 'table'">
                                <thead>
                                <tr>
                                    <th style="width:40%;">Name</th>
                                    <th style="width:25%">Availability Policy</th>
                                    <th class="d-none d-md-table-cell" style="width:25%">Amount</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in items" :key="item.id">
                                    <td>
                                        <router-link :to="itemRoute(item)">{{ item.name }}</router-link>
                                    </td>
                                    <td class="d-none d-md-table-cell">
                                        <span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
                                    </td>
                                    <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
                                    <td class="table-action">
                                        <router-link :to="`${itemRoute(item)}/edit`">
                                            <b-icon-pencil-square></b-icon-pencil-square>
                                        </router-link>
                                        <a :href="`${itemRoute(item)}/delete`" @click.prevent="tryDeleteItem(item)">
                                            <b-icon-trash></b-icon-trash>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="card-body" v-else>
                                <div class="row">
                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="item in items" :key="item.id">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title mb-0">
                                                    <router-link :to="itemRoute(item)">
                                                        {{ item.name }}
                                                    </router-link>
                                                </h5>
                                                <div class="card-text text-black-50">
                                                    <span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
                                                    <span class="float-right">{{ item.owned_quantity }}</span>
                                                </div>
                                                <div class="btn-group">
                                                    <button class="btn btn-danger btn-sm" @click="tryDeleteItem(item)">
                                                        Delete
                                                    </button>
                                                    <router-link :to="`${itemRoute(item)}/edit`"
                                                                class="btn btn-primary btn-sm">Edit
                                                    </router-link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <button class="btn" @click="fetchItems">Refresh</button>
                            <router-link :to="`/inventory/new?group=${id}`" class="btn btn-primary">Add</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

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

export default {
    name: 'GroupDetail',
    components: {
        BaseLayout,
        UserNameTag,
        ...BIcons
    },
    props: {
        id: {
            type: [String, Number],
            required: true
        }
    },
    data() {
        return {
            group: null,
            layout: "grid",
            show_invite: false,
            invitee: ""
        }
    },
    computed: {
        ...mapState(['user']),
        items() {
            return this.groupInventoryItems(this.id)
        },
        ...mapGetters(['groupInventoryItems'])
    },
    methods: {
        ...mapActions(['fetchGroup', 'removeGroupMember', 'inviteToGroup', 'fetchGroupInventoryItems',
            'deleteInventoryItem']),
        refresh() {
            this.fetchGroup({id: this.id}).then((group) => {
                this.group = group
            })
        },
        fetchItems() {
            this.fetchGroupInventoryItems(this.id)
        },
        itemRoute(item) {
            return `/inventory/${encodeHandleForUrl(this.group.handle)}/${item.id}`
        },
        tryInvite() {
            this.inviteToGroup({groupId: this.id, groupHandle: this.group.handle, invitee: this.invitee})
                .then((ok) => {
                    if (ok) {
                        this.show_invite = false
                        this.invitee = ""
                    }
                }).catch(() => {
            })
        },
        tryRemoveMember(member) {
            this.removeGroupMember({groupId: this.id, identityId: member.id}).then(() => {
                this.refresh()
            }).catch(() => {
            })
        },
        tryDeleteItem(item) {
            this.deleteInventoryItem(item).then(() => {
                this.fetchItems()
            })
        }
    },
    mounted() {
        this.refresh()
        this.fetchItems()
    }
}
</script>

<style scoped>
</style>
