/// import Swiper from 'https://unpkg.com/swiper@11.1.15/swiper.mjs?module'
/// import { Navigation, Pagination } from  'https://unpkg.com/swiper@11.1.15/swiper-bundle.mjs?module';
import Swiper from  'https://unpkg.com/swiper@11.1.15/swiper-bundle.mjs?module';

const slidetray = (setup) => {
    
    let factory = {
        setup: { /** @object : slidetray parameters */ },

        features: [],

        defaults: {
            selector: '.slidetray',
            base_url: '',
            effect: 'flip',
            theme: 'light',
            navigation: true,
            pagination: 'classsic',
            keyboard: true,
            touch: true
        },

        presentation: {
            html: '',
            css: '',
            initer: { /** @object : swiper paremetres */  }
        },

        swiper: null,


        init: function(json) {         
            for (let prop in this.defaults) {
                if (!json.hasOwnProperty(prop)) json[prop] = this.defaults[prop];
            }
            this.setup = json;
            this.presentation.initer = this.define_engine_args(json);

            return this;
        },

        define_engine_args: function(json) {
            let args = {
                spaceBetween: 30,
            }

            if (json.effect != 'none') {
                args.effect = json.effect;
            }

            if (json.navigation) {
                this.features.push('<div class="swiper-button-next"></div>');
                this.features.push('<div class="swiper-button-prev"></div>');
                args.navigation = {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
            }
            if (json.pagination != 'none') {
                this.features.push('<div class="swiper-pagination"></div>');

                let pagi = { el: ".swiper-pagination" };
                switch (json.pagination) {
                    case 'dynamic':     pagi.dynamicBullets = true; break;
                    case 'progress':    pagi.type = 'progressbar';  break;
                    case 'fraction':    pagi.type = 'fraction';     break;                  
                    default:    pagi.clickable = true
                }
                args.pagination = pagi;
            }
            if (json.keyboard) {
                args.keyboard = { enabled: true }
            }
            return args;

        },

        prepare: function() {   // prepare slides and css
            let html = [];
            let css = [];

            if (this.setup.hasOwnProperty('css')) {
                css.push(this.setup.css);
            }

            this.setup.slides.forEach( (slide, i) => { 
                let slideHtml = `
                    <div class="swiper-slide" data-id="${i}">
                        <img src="${this.setup.base_url}/${slide.image}" />
                    `;
                if (slide.poi && Array.isArray(slide.poi)) {
                    
                    slide.poi.forEach( (poi, j) => {
                        let slideClass = `f-${i}-${j}`;

                        if (poi.link) {     // link html
                            slideHtml += `<div class="${slideClass}">
                                <a href="${poi.link}" target="_blank">${poi.text}</a>
                            </div>`;

                        } else {
                            slideHtml += `<div class="${slideClass}">
                                ${poi.text}
                            </div>`;
                        }

                        if (poi.style) {    // link css
                            poi.style.forEach( rs => {  // ruleset
                                css.push(`.${slideClass}${rs}`);
                            });
                        }
                    })
                }
                slideHtml += '</div>';
                html.push(slideHtml);
            });
            this.presentation.html = html.join('\n');
            this.presentation.css = css.join('\n');

            return this;
        },

        apply: function() {
            if (this.setup.title) document.title = this.setup.title;    // set document title

            // apply css
            let styleSheet = document.createElement('style')
            styleSheet.textContent = this.presentation.css;
            document.head.appendChild(styleSheet);

            // append feature elemets
            if (this.features.length) {
                this.features.forEach( fea => {
                    document.querySelector(this.setup.selector).insertAdjacentHTML('beforeend', fea);
                })
            }

            // append slides
            document.querySelector(`${setup.selector} .swiper-wrapper`).innerHTML = this.presentation.html;

            return this;
        },

        show: function() {
            console.log('initer', this.presentation.initer);
            var swp = new Swiper(this.setup.selector, this.presentation.initer);      
            this.swiper = swp;
            return this;
        }
    }

    return factory.init(setup);
}


export default slidetray;