const { loadModule } = window['vue3-sfc-loader'];

const options = {
    moduleCache: {
        vue: Vue,
    },
    getFile(url) {
        return fetch(url).then((resp) =>
            resp.ok ? resp.text() : Promise.reject(resp)
        );
    },
    addStyle(styleStr) {
        const style = document.createElement('style');
        style.textContent = styleStr;
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
    },
};

var vueApp = Vue.createApp({
    data() {
        return {
            modeEdit: false,
            elements: [{
                id: '234bi23b4ikj',
                type: 'jumbotron',
                title: 'my super awesome title',
                text: 'there is nothing better on this planet'
            },
            {
                id: '234bi23b4ikj',
                type: 'grid',
                title: 'Group 1',
                columns: 2,
                elements: [{
                    id: '234bi23b4ikj',
                    type: 'link',
                    link: 'https://google.com/',
                    title: 'Tisoware',
                    description: 'Elektronische Arbeitszeiterfassung'
                },
                {
                    id: '234bi23b4ikj',
                    type: 'link',
                    link: 'https://google.com/',
                    title: 'IT Helpdesk',
                    description: 'Helpdesk der operativen IT für Supportanfragen'
                }]
            }]
        }
    },
    methods: {
        toggleEditor()
        {
            this.modeEdit = !this.modeEdit;
        }
    },
    components: {
        DynamicRoot: Vue.defineAsyncComponent(() =>
            loadModule('/vue/root.vue', options)
        ),
    },
}).mount('#app');