<template>
    <div id="app">
        <component :is="componentToRender" v-if="componentToRender" />
    </div>
</template>

<script>
import Vue from 'vue';

import PxVueTest from '../components/PxVueTest.vue';
import DemoPxSlides from './demos/Demo-PxSlides.vue';
import DemoPxSideDrawer from './demos/Demo-PxSideDrawer.vue';
import DemoPxCardGrid from './demos/Demo-PxCardGrid.vue';
import DemoPxSlideTransition from './demos/Demo-PxSlideTransition.vue';
import DemoPxSwiper from './demos/Demo-PxSwiper.vue';
import DemoPxBaseDrag from './demos/Demo-PxBaseDrag.vue';
import DemoPxStylesPreview from './demos/Demo-PxStylesPreview.vue';
import DemoPxPivot from './demos/Demo-PxPivot.vue';
import DemoPxFloat from './demos/Demo-PxFloat.vue';
import DemoPxContain from './demos/Demo-PxContain.vue';
import DemoPxMenu from './demos/Demo-PxMenu.vue';
import DemoPxFlip from './demos/Demo-PxFlip.vue';

export default Vue.extend({
    components: {
        PxVueTest,
        DemoPxSlides,
        DemoPxSideDrawer,
        DemoPxCardGrid,
        DemoPxSlideTransition,
        DemoPxSwiper,
        DemoPxBaseDrag,
        DemoPxStylesPreview,
        DemoPxPivot,
        DemoPxFloat,
        DemoPxContain,
        DemoPxMenu,
        DemoPxFlip,
    },
    name: 'ServeDev',
    data() {
        return {
            componentToRender: null,
        };
    },
    computed: {},
    mounted() {
        const params = new Proxy(new URLSearchParams(window.location.search), {
            get: (searchParams, prop) => searchParams.get(prop),
        });
        this.componentToRender = params.component || 'DemoPxFlip';
        console.log(`this.componentToRender: ${this.componentToRender}`);
    },
});
</script>
<style>
html,
body {
    margin: 0;
    padding: 0;
    min-width: 100vw;
    min-height: 100vh;
}
</style>
