<template>
    <div class="row-group">
        <component is="script" src="./javascript/ajax.js" v-if="!scriptAjaxExists"></component>
        <input name="categories_length" type="hidden" :value="categories.length" />
        <category
            v-for="(categ, index) in categories"
            :key="index"
            :category="categ"
            :index="index"
            :multiple="true"
            :idThesaurus="idThesaurus"
            @categoryChange="changeField"
            @categoryDelete="deleteField"
        >
            <input
                v-if="index == categories.length - 1"
                class="bouton" type="button"
                @click="addField($event)"
                :title="messages.get('common', 'more_label')"
                :value="messages.get('common', 'more')"
            />
        </category>
    </div>
</template>

<script>
import category from './category.vue';
export default {
    props: {
        idThesaurus: {
            type: Number,
            required: false,
            default: () => 0
        },
        categories: {
            type: Array,
            required: false,
            default: () => []
        }
    },
    components: { category },
    created() {
        if (this.categories.length === 0) {
            this.addEntity();
        }
    },
    computed: {
        scriptAjaxExists() {
            return !!document.querySelector('script[src="./javascript/ajax.js"]');
        }
    },
    methods: {
        /**
         * Adds a new entity to the list of categories.
         * @param {number} [id=0] - The ID of the new entity.
         * @param {string} [displayLabel=""] - The display label of the new entity.
         * @returns {number} - The index of the new entity in the list of categories.
         */
        addEntity(id = 0, displayLabel = "") {
            const newIndex = this.categories.length
            this.categories.push({ id, displayLabel});
            return newIndex;
        },
        /**
         * Adds a new field by calling addEntity.
         * @returns {number} - The index of the new entity in the list of categories.
         */
        addField() {
            return this.addEntity();
        },
        /**
         * Updates a category at the specified index with the new category data.
         * If the category does not exist, adds a new category with the specified data.
         * @param {number} index - The index of the category to update.
         * @param {Object} category - The new category data.
         * @param {number} category.id - The ID of the new category.
         * @param {string} category.displayLabel - The display label of the new category.
         */
        changeField(index, category) {
            if (this.categories[index]) {
                this.$set(this.categories, index, category);
            } else {
                this.addEntity(category.id, category.displayLabel);
            }
        },
        /**
         * Deletes a category at the specified index.
         * If there is more than one category, deletes the category.
         * If there is only one category, sets the category to an empty object.
         * @param {Event} _ - The event that triggered the deletion.
         * @param {number} index - The index of the category to delete.
         */
        deleteField: function(_ , index) {
            if (this.categories.length > 1) {
                this.categories.splice(index, 1);
            } else {
                this.$set(this.categories, index, { id: 0, displayLabel: '' });
            }
            document.activeElement.blur();
        },
    }
}
</script>