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 ['AwesomeSwiper', function AwesomeSwiper() {
    return {
        component: new Promise(async (resolve) => {
            if (process.env.VUE_ENV === 'client') {
                Vue.use((await getComponent())[0]);
            }
            resolve({
                props: {
                    options: {
                        type: Object,
                        default() {
                            return {};
                        }
                    },
                    name: String,
                    regSuccess: Function
                },
                mounted() {
                    this.regSuccess && this.regSuccess(this[this.name]);
                    if (this[this.name] && this.$parent) { // TODO remove
                        this.$parent[this.name] = this[this.name];
                    }
                },
                render: function(h) {
                    return h('div', {
                        directives: [{
                            name: 'swiper',
                            arg: this.name,
                            value: this.options
                        }]
                    }, this.$slots.default);
                }
            });
        }),
    };
}];