import './assets/main.css';
import { createApp, provide } from 'vue';
import ui from '@nuxt/ui/vue-plugin'
import Card from './components/Card.vue';
import Calendar from './components/Calendar.vue';
import ColorPicker from './components/ColorPicker.vue';
import Carousel from './components/Carousel.vue';
import Avatars from './components/Avatars.vue';

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.vue-nuxt-ui-example').forEach(
        (element) => {
            const element_id   = 'vue-'+Math.random().toString(16).slice(2); element.id = element_id;
            const element_type = element.dataset.vueComponentType;
            switch (element_type) {
                case 'card':
                    const element_app = createApp(Card);
                    element_app.use(ui);
                    element_app.mount('#' + element_id);
                    break;
                case 'calendar':
                    const calendar_app = createApp(Calendar);
                    calendar_app.use(ui);
                    calendar_app.mount('#' + element_id);
                    break;
                case 'color-picker':
                    const color_picker_app = createApp(ColorPicker);
                    color_picker_app.use(ui);
                    color_picker_app.mount('#' + element_id);
                    break;
                case 'carousel':
                    const carousel_items = JSON.parse(element.dataset.vueCarouselItems).data.items;
                    const carousel_app = createApp(Carousel, { items: carousel_items }); //<-- use PROPS to pass data to the component
                    carousel_app.use(ui);
                    carousel_app.mount('#' + element_id);
                    break;
                case 'avatar-group':
                    const avatar_items = JSON.parse(element.dataset.vueAvatarImages).data.items;
                    const avatar_group_app = createApp(Avatars);
                    avatar_group_app.provide('avatar_items', avatar_items); // <-- use provide/inject to pass data to the component
                    avatar_group_app.use(ui);
                    avatar_group_app.mount('#' + element_id);
                    break;
                default:
                    console.warn('Unknown Vue component type: ' + element_type);
                    return;
            }
        }
    );

});