<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">Inventory Own & Friends"</h1>
                <div class="row">
                    <div class="col-12 col-xl-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">{{ user }}'s 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 inventory_items" :key="item.id">
                                    <td>
                                        <router-link :to="`/inventory/${item.id}`">{{ 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="`/inventory/${item.id}/edit`">
                                            <b-icon-pencil-square></b-icon-pencil-square>
                                        </router-link>
                                        <a :href="`/inventory/${item.id}/delete`" @click.prevent="deleteInventoryItem(item)">
                                            <b-icon-trash></b-icon-trash>
                                        </a>
                                        <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)">
                                            <b-icon-link></b-icon-link>
                                        </router-link>
                                    </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 inventory_items"
                                         :key="item.id">
                                        <div class="card">
                                            <img :src="item.image" class="" :alt="item.image">
                                            <authenticated-image v-if="only_images(item.files).length > 0"
                                                                 :src="only_images(item.files)[0].name"
                                                                 :owner="only_images(item.files)[0].owner"
                                                                 class="card-img-top img-preview"/>
                                            <div class="card-body">
                                                <h5 class="card-title mb-0">
                                                    <router-link :to="`/inventory/${item.id}`">
                                                        {{ 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="deleteInventoryItem(item)">Delete
                                                    </button>
                                                    <router-link :to="`/inventory/${item.id}/edit`"
                                                                 class="btn btn-primary btn-sm">Edit
                                                    </router-link>
                                                    <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
                                                                 class="btn btn-secondary btn-sm">
                                                        <b-icon-link></b-icon-link>
                                                    </router-link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="card">
                            <button class="btn" @click="fetchInventoryItems">Refresh</button>
                            <router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

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

export default {
    name: "Inventory",
    data() {
        return {
            layout: "grid",
        }
    },
    components: {
        AuthenticatedImage,
        BaseLayout,
        ...BIcons
    },
    computed: {
        ...mapGetters(["inventory_items", "loaded_items", "identityIdByHandle", "groupIdByHandle"]),
        ...mapState(["user", "storage_locations"]),
    },
    methods: {
        ...mapActions(["fetchInventoryItems", "deleteInventoryItem", "fetchStorageLocations", "fetchIdMap"]),
        only_images(files) {
            return files.filter(file => file.mime_type.startsWith("image/"));
        },
        locationPath(item) {
            const loc = this.storage_locations.find(loc => loc.id === item.storage_location)
            return loc ? loc.path : null
        },
        shortIdLink(item) {
            if (item.owner_group) {
                const owner_group_id = this.groupIdByHandle[item.owner_group]
                if (owner_group_id === undefined) return null
                return shortenedRoute({kind: 'group_item', owner_group_id, item_local_id: item.id})
            }
            const owner_identity_id = this.identityIdByHandle[item.owner]
            if (owner_identity_id === undefined) return null
            return shortenedRoute({kind: 'item', owner_identity_id, item_local_id: item.id})
        },
    },
    async mounted() {
        await this.fetchInventoryItems()
        await this.fetchStorageLocations()
        await this.fetchIdMap()
    }
}
</script>

<style scoped>
.img-preview {
    object-fit: cover;
}
</style>