const presentationFactory = (setup) => {
    
    return {
        setup : {},
        presentation: {
            html: '',
            css: '',
            swiper: {}
        },

        init: function (s) {
            this.setup = s;
        },

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

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

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

                        } else {
                            slideHtml += `<div class="f-${i}-${j}">
                                ${poi.text}
                            </div>`;
                        }

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

            return this;
        },

        apply: function() {
            document.querySelector(setup.selector).innerHTML = this.presentation.html;
            let swiper = new Swiper(this.presentation.swiper);

            console.info('presentation is ready!');
            return this;
        }
        


    }
}