import { createApp } from 'vue';
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
import { activityMessages } from './i18n'
import store from './store'
import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
import {fetchTemplates} from 'ChillDocGeneratorAssets/api/pickTemplate.js';

import App from './App.vue';

const i18n = _createI18n(activityMessages);

// app for activity

const hasSocialIssues = document.querySelector('#social-issues-acc') !== null;
const hasLocation = document.querySelector('#location') !== null;
const hasPerson = document.querySelector('#add-persons') !== null;

const app = createApp({
   template: `<app
       :hasSocialIssues="hasSocialIssues"
       :hasLocation="hasLocation"
       :hasPerson="hasPerson"
    ></app>`,
    data() {
       return {
           hasSocialIssues,
           hasLocation,
           hasPerson,
       };
    }
})
.use(store)
.use(i18n)
.component('app', App)
.mount('#activity');


// app for picking template

const i18nGendoc = _createI18n({});

document.querySelectorAll('div[data-docgen-template-picker]').forEach(el => {
    fetchTemplates(el.dataset.entityClass).then(templates => {
        const picker = {
            template:
                '<pick-template :templates="this.templates" :preventDefaultMoveToGenerate="true" ' +
                    ':entityClass="faked" @go-to-generate-document="generateDoc"></pick-template>',
            components: {
                PickTemplate,
            },
            data() {
                return {
                    templates: templates,
                    entityId: el.dataset.entityId,
                }
            },
            methods: {
                generateDoc({event, link, template}) {
                    console.log('generateDoc');
                    console.log('link', link);
                    console.log('template', template);

                    let hiddenInput = document.querySelector("input[data-template-id]");

                    if (hiddenInput === null) {
                        console.error('hidden input not found');
                        return;
                    }

                    hiddenInput.value = template;

                    let form = document.querySelector('form[name="chill_activitybundle_activity"');

                    if (form === null) {
                        console.error('form not found');
                        return;
                    }

                    form.submit();
                }
            }
        };
        createApp(picker).use(i18nGendoc).mount(el);
    })

});