import {createApp} from 'vue'

function triggerApp(el) {

    const $app = createApp({
        name: "Menu widget " + el.dataset.unique,
        data() {
            return {
                appReady: false,
                settings: window['webienTocMenu_' + el.dataset.unique],
            }
        },
        mixins: [],
        computed: {},
        watch: {},
        methods: {

            init() {
                let app = this;

                // Check open states
                if (app.settings.expanded) {
                    if(this.settings.menuType === 'wp_menu') {
                        Object.values(app.settings.menu).forEach((item) => {
                            if (item.hasOwnProperty('childs')) {
                                item.open = true;
                            }
                        });
                    } else {
                        app.settings.menu.forEach((item) => {
                            if (item.hasOwnProperty('childs')) {
                                item.open = true;
                            }
                        });
                    }
                }


                // Always open if child is active
                if (this.settings.menuType === 'wp_menu') {
                    Object.values(app.settings.menu).forEach((item) => {
                        if (item.hasOwnProperty('childs')) {
                            Object.values(item.childs).forEach((child) => {
                                if (child.active === 'current-menu-item') {
                                    item.open = true;
                                }
                            });
                        }
                    });
                } else {
                    app.settings.menu.forEach((item) => {
                        if (item.hasOwnProperty('childs')) {
                            item.childs.forEach((child) => {
                                if (child.active === 'current-menu-item') {
                                    item.open = true;
                                }
                            });
                        }
                    });
                }


                // Sticky?
                if (app.settings.dockContainer) {
                    // Use Waypoints to set sticky position
                    let sticky = new Waypoint.Sticky({
                        element: document.getElementById('webien-toc-widget-' + el.dataset.unique),
                        offset: app.settings.dockContainerOffset,
                    });
                }

                this.updateDockWidth();
                window.onresize = function () {
                    app.updateDockWidth();
                }


                app.appReady = true;

            },
            updateDockWidth() {
                let root = document.documentElement;
                let parent = el.closest('.sticky-wrapper');
                if (parent) {
                    root.style.setProperty('--toc-menu-dock-width', parent.offsetWidth + 'px');
                } else {
                    root.style.setProperty('--toc-menu-dock-width', '100%');
                }

            },

            toggleChild(item) {
                item.open = !item.open;
            }


        },
        mounted: function () {

            console.log(this.settings);

            this.init();
        },
        created() {
        },
        components: {},
    });


    // Mount app to DOM
    let rootEl = document.getElementById("webien-toc-widget-" + el.dataset.unique);
    if (rootEl) {
        $app.mount('#webien-toc-widget-' + el.dataset.unique);
        rootEl.classList.add('mounted');
    }

}

// Trigger all but popup apps
let elements = document.querySelectorAll('.webien-toc-widget-menu');
elements.forEach((el) => {
    // If element has a ancestor of 'elementor-location-popup' skip it
    if (el.closest('.elementor-location-popup') === null) {
        triggerApp(el);
    }
});


// Trigger apps in popups when they open
jQuery(document).on('elementor/popup/show', (event, id, instance) => {
    let elements = instance.$element[0].querySelectorAll('.webien-toc-widget-menu');
    elements.forEach((el) => {
        triggerApp(el);
    });
});