<template>
    <BaseLayout>
        <main class="content">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-header">Edit Item</div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" class="form-control" id="name" name="name"
                                       placeholder="Enter item name" v-model="item.name">
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" name="description"
                                          placeholder="Enter description" v-model="item.description"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="tags" class="form-label">Tags</label>
                                <tag-field :value="item.tags"></tag-field>
                            </div>
                            <div class="mb-3">
                                <label for="property" class="form-label">Property</label>
                                <property-field :value="item.properties"></property-field>
                            </div>
                            <div class="mb-3">
                                <label for="quantity" class="form-label">Quantity</label>
                                <input type="number" class="form-control" id="quantity" name="quantity"
                                       placeholder="Enter quantity" v-model="item.owned_quantity">
                            </div>
                            <div class="mb-3">
                                <label for="availablity_policy" class="form-label">Availablity Policy</label>
                                <select class="form-select" id="availablity_policy" name="availablity_policy"
                                        v-model="item.availability_policy">
                                    <option v-for="policy in availability_policies" :value="policy.slug"
                                            :selected="policy.slug === item.availability_policy">
                                        {{ policy.text }}
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="storage_location" class="form-label">Storage Location</label>
                                <select class="form-select" id="storage_location" name="storage_location"
                                        v-model="item.storage_location">
                                    <option :value="null">No storage location</option>
                                    <option v-for="location in storage_locations" :value="location.id"
                                            :key="location.id">
                                        {{ location.path }}
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="image" class="form-label">Image</label>
                                <combined-file-field :item_files="item.files" :item_id="item.id"
                                                     @change="changeFiles"></combined-file-field>
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary" style="width: 100%"
                                        @click="updateInventoryItem(item)">Update
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

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

export default {
    name: "InventoryEdit",
    components: {
        BaseLayout,
        TagField,
        PropertyField,
        CombinedFileField,
        ...BIcons
    },
    props: {
        handle: {
            type: String,
            required: true
        },
        id: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            // Fetched fresh by {handle, id} on mount rather than looked up by id alone -
            // loaded_items mixes personal/group/search fetches, and id is only unique per owner
            // (see InventoryDetail.vue).
            item: {
                tags: [],
                properties: [],
                name: "",
                description: "",
                owned_quantity: 0,
                image: "",
                files: [],
                storage_location: null,
            }
        }
    },
    computed: {
        ...mapState(["availability_policies", "storage_locations"]),
        decodedHandle() {
            return decodeHandleFromUrl(this.handle)
        }
    },
    methods: {
        ...mapActions(["fetchItemByHandle", "updateInventoryItem", "fetchInfo", "fetchStorageLocations"]),
        changeFiles(files) {
            this.item.files = files
        },
        async loadItem() {
            const loaded = await this.fetchItemByHandle({handle: this.decodedHandle, id: this.id})
            if (loaded) {
                this.item = {...this.item, ...loaded}
            }
        }
    },
    async mounted() {
        await this.fetchInfo();
        await this.loadItem();
        await this.fetchStorageLocations();
    }
}
</script>

<style scoped>

</style>