 
const slider = (($) => {
    const className = {
        current: 'cd--current',
        disabled: 'cd--disabled'
    }
    const DefaultConfig = {
        node: '', 
        listContainer: '.J_listContainer',
        list: '.J_list',
        item: '.J_listItem',
        prevTrigger: '.J_prev',
        nextTrigger: '.J_next',
        currentIndex: 0
    };
    class slider {
        constructor(config) {
            this._config = this._getConfig(config);
            this.container = $(this._config.node);
            this.currentIndex = this._config.currentIndex;
            this.translateX = 0;
            this._parse();
            this._slideTo(this.currentIndex);
            this._addEvent();
        }
        
        _getConfig(config) {
            return $.extend(true,{}, DefaultConfig, config);
        }
        
        dispose() {
        }
        _parse() {
            let container = this.container;
            let cfg = this._config;
            let listContainer = this.container.find(cfg.listContainer);
            listContainer.each((i, content)=>{
                let items = $(content).find(cfg.item);
                let len = items.length;
                const itemWidth = $(content).width();
                const listWidth = len * this.itemWidth;
                items.css({
                    width: itemWidth
                });
                $(content).find(cfg.list).css({
                    width: listWidth
                });
            });
        }
        _addEvent() {
            let container = this.container;
            let cfg = this._config;
            container.find(cfg.prevTrigger).click(ev=>{
                if($(ev.target).hasClass(className.disabled)) {
                    return;
                }
                this._slideTo(this.currentIndex - 1);
            });
            container.find(cfg.nextTrigger).click(ev=>{
                if($(ev.target).hasClass(className.disabled)) {
                    return;
                }
                this._slideTo(this.currentIndex + 1);
            });
        }
        _slideTo(index) {
            let container = this.container;
            let cfg = this._config;
            let list = container.find(cfg.list);
            list.each((i, content)=>{
                const itemWidth = $(content).width();
                let items = $(content).find(cfg.item);
                let x;
                if(index + 1 > items.length) {
                    index = items.length - 1;
                }
                if(index < 0){
                    index = 0;
                }
                x = index * itemWidth;
                this.translateX = x;
                $(content).css({
                    transform: 'translateX(' + (0 - x)  +'px)'
                });
            });
            this.currentIndex = index;
            this._displayTrigger();
        }
        _displayTrigger() {
            let container = this.container;
            let cfg = this._config;
            let currentIndex = this.currentIndex;
            let prev = container.find(cfg.prevTrigger);
            let next = container.find(cfg.nextTrigger);
            if(currentIndex == 0) {
                prev.addClass(className.disabled);
            }else {
                prev.removeClass(className.disabled);
            }
            if(currentIndex + 1 >= container.find(cfg.listContainer).eq(0).find(cfg.item).length) {
                next.addClass(className.disabled);
            }else {
                next.removeClass(className.disabled);
            }
        }
    }
    return slider;
})($);
export default slider;