<template>
    <ul :class="listClasses" v-if="picked.length && displayPicked">
        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type + p.id">
            <span class="chill_denomination">{{ p.text }}</span>
        </li>
    </ul>
    <ul class="record_actions">
        <li class="add-persons">
            <add-persons
                :options="addPersonsOptions"
                :key="uniqid"
                :buttonTitle="translatedListOfTypes"
                :modalTitle="translatedListOfTypes"
                ref="addPersons"
                @addNewPersons="addNewEntity"
            >
            </add-persons>
        </li>
    </ul>
    <ul class="list-suggest add-items inline">
        <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
            <span>{{ s.text }}</span>
        </li>
    </ul>
</template>

<script>
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
import { appMessages } from "./i18n";

export default {
    name: "PickEntity",
    props: {
        multiple: {
            type: Boolean,
            required: true,
        },
        types: {
            type: Array,
            required: true,
        },
        picked: {
            required: true,
        },
        uniqid: {
            type: String,
            required: true,
        },
        removableIfSet: {
            type: Boolean,
            default: true,
        },
        displayPicked: {
            // display picked entities.
            type: Boolean,
            default: true,
        },
        suggested: {
            type: Array,
            default: [],
        },
        label: {
            type: String,
            required: false,
        },
    },
    emits: ["addNewEntity", "removeEntity", "addNewEntityProcessEnded"],
    components: {
        AddPersons,
    },
    data() {
        return {
            key: "",
        };
    },
    computed: {
        addPersonsOptions() {
            return {
                uniq: !this.multiple,
                type: this.types,
                priority: null,
                button: {
                    size: "btn-sm",
                    class: "btn-submit",
                },
            };
        },
        translatedListOfTypes() {
            if (this.label !== "") {
                return this.label;
            }

            let trans = [];
            this.types.forEach((t) => {
                if (this.$props.multiple) {
                    trans.push(appMessages.fr.pick_entity[t].toLowerCase());
                } else {
                    trans.push(
                        appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
                    );
                }
            });

            if (this.$props.multiple) {
                return (
                    appMessages.fr.pick_entity.modal_title + trans.join(", ")
                );
            } else {
                return (
                    appMessages.fr.pick_entity.modal_title_one +
                    trans.join(", ")
                );
            }
        },
        listClasses() {
            return {
                "list-suggest": true,
                "remove-items": this.$props.removableIfSet,
            };
        },
    },
    methods: {
        addNewSuggested(entity) {
            this.$emit("addNewEntity", { entity: entity });
        },
        addNewEntity({ selected, modal }) {
            selected.forEach((item) => {
                this.$emit("addNewEntity", { entity: item.result });
            }, this);
            this.$refs.addPersons.resetSearch(); // to cast child method
            modal.showModal = false;
            this.$emit("addNewEntityProcessEnded");
        },
        removeEntity(entity) {
            if (!this.$props.removableIfSet) {
                return;
            }
            this.$emit("removeEntity", { entity: entity });
        },
    },
};
</script>
