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);

let appsOnPage = new Map();

function loadDynamicPicker(element) {

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

    apps.forEach(function(el) {

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

        if (!isMultiple) {
            if (input.value === '[]'){
                input.value = null;
            }
        }

        const app = 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);

        appsOnPage.set(uniqId, app);
    });
}


document.addEventListener('show-hide-show', function(e) {
    console.log('creation event caught')
    loadDynamicPicker(e.detail.container)
})

document.addEventListener('show-hide-hide', function(e) {
    console.log('hiding event caught')
    e.detail.container.querySelectorAll('[data-module="pick-dynamic"]').forEach((el) => {
        let uniqId = el.dataset.uniqid;
        console.log(uniqId);
        if (appsOnPage.has(uniqId)) {
            appsOnPage.get(uniqId).unmount();
            console.log('App has been unmounted')
            appsOnPage.delete(uniqId);
        }
    })
})

document.addEventListener('DOMContentLoaded', function(e) {
    console.log('loaded event', e)
    loadDynamicPicker(document)
})