import Plugin from 'src/plugin-system/plugin.class';
import {tns} from 'tiny-slider/src/tiny-slider.module';

export default class BcAquaCategoryBoxes extends Plugin {
    static options = {
        containerSelector: '[data-bc-category-boxes-container=true]',
        controlsSelector: '[data-bc-category-boxes-controls=true]',
        sliderConfig: {
            items: 1,
            slideBy: 'page',
            autoplay: false,
            gutter: 20,
            mouseDrag: true,
            controls: true,
            nav: false,
            autoplayButtonOutput: false,
            loop: true,
            rewind: true,
            responsive: {
                0: { items: 1 },
                480: { items: 2 },
                600: { items: 2 },
                800: { items: 3 },
                1000: { items: 4 },
                1200: { items: 5 },
                1400: { items: 5 },
            },
        }
    };

    init() {
        this.options.sliderConfig.container = this.el.querySelector(this.options.containerSelector);
        this.options.sliderConfig.controlsContainer = this.el.querySelector(this.options.controlsSelector);
        this.initializeSliders();
    }

    initializeSliders() {
        let sliderInstances = tns(this.options.sliderConfig);
    }
}
