<template>
    <BaseLayout>
        <main class="content">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-header">Edit Storage Location</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 storage location name" v-model="location.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="location.description"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="category" class="form-label">Category</label>
                                <select class="form-select" id="category" name="category"
                                        v-model="location.category">
                                    <option value="">No Category</option>
                                    <option v-for="category in categories" :value="category"
                                            :selected="category === location.category">
                                        {{ category }}
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="parent" class="form-label">Parent Location</label>
                                <select class="form-select" id="parent" name="parent"
                                        v-model="location.parent">
                                    <option value="">No Parent</option>
                                    <option v-for="parent in availableParents" :value="parent.id"
                                            :selected="parent.id === location.parent">
                                        {{ parent.path }}
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary" style="width: 100%"
                                        @click="submitForm()">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";

export default {
    name: "StorageLocationEdit",
    components: {
        BaseLayout,
        ...BIcons
    },
    props: {
        id: {
            type: String,
            required: true
        }
    },
    computed: {
        ...mapState(["storage_locations", "categories"]),
        location() {
            return {
                name: "",
                description: "",
                category: null,
                parent: null,
                ...this.storage_locations.find(loc => loc.id === parseInt(this.id))
            }
        },
        availableParents() {
            // Filter out self and children to prevent circular references
            return this.storage_locations.filter(loc =>
                loc.id !== parseInt(this.id) &&
                !this.isChildOf(loc, parseInt(this.id))
            )
        }
    },
    methods: {
        ...mapActions(["fetchStorageLocations", "updateStorageLocation", "fetchInfo"]),
        submitForm() {
            // Convert empty strings to null for ForeignKey fields
            const locationData = {
                ...this.location,
                category: this.location.category === "" ? null : this.location.category,
                parent: this.location.parent === "" ? null : this.location.parent
            };
            this.updateStorageLocation(locationData);
        },
        isChildOf(location, parentId) {
            // Simple check to prevent circular references
            let current = location;
            while (current && current.parent) {
                if (current.parent === parentId) return true;
                current = this.storage_locations.find(loc => loc.id === current.parent);
            }
            return false;
        }
    },
    async mounted() {
        await this.fetchInfo();
        await this.fetchStorageLocations();
    }
}
</script>

<style scoped>
</style>
