import { createApp } from 'vue';
import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';

const i18n = _createI18n(appMessages);

window.addEventListener('DOMContentLoaded', function(e) {

    let apps = document.querySelectorAll('[data-module="pick-dynamic"]');

    apps.forEach(function(el) {

        const
            isMultiple = parseInt(el.dataset.multiple) === 1,
            input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
            picked = isMultiple ? JSON.parse(input.value) : [JSON.parse(input.value)];

        createApp({
            template: '<pick-entity ' +
                ':multiple="multiple" ' +
                ':types="types" ' +
                ':picked="picked" ' +
                ':uniqid="uniqid" ' +
                '@addNewEntity="addNewEntity" ' +
                '@removeEntity="removeEntity"></pick-entity>',
            components: {
                PickEntity,
            },
            data() {
                return {
                    multiple: isMultiple,
                    types: JSON.parse(el.dataset.types),
                    picked: picked === null ? [] : picked,
                    uniqid: el.dataset.uniqid,
                }
            },
            methods: {
                addNewEntity(entity) {
                    console.log('addNewEntity', entity);
                    if (this.multiple) {
                        console.log('adding multiple');
                        if (!this.picked.some(el => {
                            return el.type === entity.type && el.id === entity.id;
                        })) {
                            this.picked.push(entity);
                            input.value = JSON.stringify(this.picked);
                        }
                    } else {
                        if (!this.picked.some(el => {
                            return el.type === entity.type && el.id === entity.id;
                        })) {
                            this.picked.splice(0, this.picked.length);
                            this.picked.push(entity);
                            input.value = JSON.stringify(this.picked[0]);
                        }
                    }
                },
                removeEntity(entity) {
                    console.log('removeEntity', entity);
                    this.picked = this.picked.filter(e => !(e.type === entity.type && e.id === entity.id));
                    input.value = JSON.stringify(this.picked);
                },
            }
        })
        .use(i18n)
        .mount(el);
    });
});