<template>
    <div class="a-m2m-edit">
        <table class="table is-fullwidth">
            <thead>
                <tr>
                    <th>
                        <slot name="items-title"></slot>
                    </th>
                    <th style="width: 1rem">
                        <span class="icon">
                            <i class="fa fa-trash"/>
                        </span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template v-for="item of items" :key="item.id">
                    <tr :class="[item.created && 'has-text-info', item.deleted && 'has-text-danger']">
                        <td>
                            <slot name="item" :item="item">
                                {{ item.data }}
                            </slot>
                        </td>
                        <td class="align-center">
                            <input type="checkbox" class="checkbox" @change="item.deleted = $event.target.checked">
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
        <div>
            <label>
                <span class="icon">
                    <i class="fa fa-plus"/>
                </span>
                Add
            </label>
            <a-autocomplete ref="autocomplete" v-bind="autocomplete"
                @select="onSelect">
                <template #item="{item}">
                    <slot name="autocomplete-item" :item="item">{{ item }}</slot>
                </template>
            </a-autocomplete>
        </div>
    </div>
</template>
<script>
import Model, { Set } from "../model.js"
import AAutocomplete from "./AAutocomplete.vue"

export default {
    components: {AAutocomplete},
    props: {
        model: {type: Function, default: Model },
        // List url
        url: String,
        // POST url
        commitUrl: String,
        // v-bind to autocomplete search box
        autocomplete: {type: Object },

        source_id: Number,
        source_field: String,
        target_field: String,
    },

    data() {
        return {
            set: new Set(this.model, {url: this.url, unique: true}),
        }
    },

    computed: {
        items() { return this.set?.items || [] },
        initials() {
            let obj = {}
            obj[this.source_id_attr] = this.source_id
            return obj
        },

        source_id_attr() { return this.source_field + "_id" },
        target_id_attr() { return this.target_field + "_id" },
        target_ids() { return this.set?.items.map(i => i.data[this.target_id_attr]) },
    },

    methods: {
        onSelect(index, item, value) {
            if(this.target_ids.indexOf(item.id) != -1)
                return

            let obj = {...this.initials}
            obj[this.target_field] = {...item}
            obj[this.target_id_attr] = item.id
            this.set.push(obj)
            this.$refs.autocomplete.reset()
        },

        save() {
            this.set.commit(this.commitUrl, {
                fields: [...Object.keys(this.initials), this.target_id_attr]
            })
        },
    },

    mounted() {
        this.set.fetch()
    },
}
</script>
