import Vue from 'vue';

async function getComponent() {
    return [
        await import(/* webpackChunkName: "swiper" */'vue-awesome-swiper/dist/ssr'),
        await import(/* webpackChunkName: "swiper" */'swiper/dist/css/swiper.css')];
}

export default function AwesomeSwiper() {
    return {
        component: new Promise(async (resolve) => {
            console.log('process.env.VUE_ENV=', process.env.VUE_ENV);
            if (process.env.VUE_ENV === 'client') {
                console.log('getComponent');
                Vue.use((await getComponent())[0]);
            }
            resolve({
                props: {
                    options: {
                        type: Object,
                        default() {
                            return {};
                        }
                    },
                    name: String
                },
                render: function(h) {
                    return h('div', {
                        directives: [{
                            name: 'swiper',
                            arg: this.name,
                            value: this.options
                        }]
                    }, this.$slots.default);
                }
            });
        }),
    };
}