<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">Storage Locations</h1>
                <div class="row">
                    <div class="col-12 col-xl-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">{{ user }}'s Storage Locations</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%">Path</th>
                                    <th class="d-none d-md-table-cell" style="width:25%">Category</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="location in storage_locations" :key="location.id">
                                    <td>
                                        <router-link :to="`/storage-locations/${location.id}`">{{ location.name }}</router-link>
                                    </td>
                                    <td class="d-none d-md-table-cell">
                                        <span class="text-muted">{{ location.path }}</span>
                                    </td>
                                    <td class="d-none d-md-table-cell">
                                        <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
                                        <span class="text-muted" v-else>-</span>
                                    </td>
                                    <td class="table-action">
                                        <router-link :to="`/storage-locations/${location.id}/edit`">
                                            <b-icon-pencil-square></b-icon-pencil-square>
                                        </router-link>
                                        <a :href="`/storage-locations/${location.id}/delete`" @click.prevent="deleteStorageLocation(location)">
                                            <b-icon-trash></b-icon-trash>
                                        </a>
                                        <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)">
                                            <b-icon-link></b-icon-link>
                                        </router-link>
                                        <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)">
                                            <b-icon-qr-code></b-icon-qr-code>
                                        </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="location in storage_locations"
                                         :key="location.id">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title mb-0">
                                                    <router-link :to="`/storage-locations/${location.id}`">
                                                        {{ location.name }}
                                                    </router-link>
                                                </h5>
                                                <div class="card-text text-black-50">
                                                    <small class="text-muted d-block">{{ location.path }}</small>
                                                    <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
                                                </div>
                                                <div class="card-text" v-if="location.description">
                                                    <small>{{ location.description }}</small>
                                                </div>
                                                <div class="btn-group mt-2">
                                                    <button class="btn btn-danger btn-sm"
                                                            @click="deleteStorageLocation(location.id)">Delete
                                                    </button>
                                                    <router-link :to="`/storage-locations/${location.id}/edit`"
                                                                 class="btn btn-primary btn-sm">Edit
                                                    </router-link>
                                                    <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)"
                                                                 class="btn btn-secondary btn-sm">
                                                        <b-icon-link></b-icon-link>
                                                    </router-link>
                                                    <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)"
                                                                 class="btn btn-secondary btn-sm">
                                                        <b-icon-qr-code></b-icon-qr-code>
                                                    </router-link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="card">
                            <button class="btn" @click="fetchStorageLocations">Refresh</button>
                            <router-link to="/storage-locations/new" 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 {shortenedRoute} from "@/router";

export default {
    name: "StorageLocation",
    data() {
        return {
            layout: "grid",
        }
    },
    components: {
        BaseLayout,
        ...BIcons
    },
    computed: {
        ...mapGetters(["identityIdByHandle"]),
        ...mapState(["user", "storage_locations"]),
    },
    methods: {
        ...mapActions(["fetchStorageLocations", "deleteStorageLocation", "fetchIdMap"]),
        shortIdLink(location) {
            const owner_identity_id = this.identityIdByHandle[location.owner]
            if (owner_identity_id === undefined) return null
            return shortenedRoute({kind: 'storage_location', owner_identity_id, storage_location_id: location.id})
        },
        // Routes to Print.vue with this location's raw identity, same shape as Inventory.vue's
        // printLinkFor. See docs/implementation.md#print-link-shape-for-storage-locations.
        printLinkFor(location) {
            return {path: '/print', query: {kind: 'storage-location', userHandle: location.owner, location: location.id}}
        },
    },
    async mounted() {
        await this.fetchStorageLocations()
        await this.fetchIdMap()
    }
}
</script>

<style scoped>
.card-text small {
    font-size: 0.8rem;
}

.btn-group {
    width: 100%;
}

.btn-group .btn {
    flex: 1;
}
</style>
