class Carousel {
    constructor(id){
        this.elementWidths = [];
        this.ELEMNET_WIDTH = 200;
        this.ELEMENT_SPACE = 0;
        this.tempL = false;
        this.tempR = false;
        this.posX = 0;
        this.callbackAfter = false;
        this.onLoad = false;
        let tele = document.getElementById(id);
        if(tele){
            this.scene = tele;
            this.computeIt();
        }else{
            return false;
        }

    }
}

Carousel.prototype.computeIt = function(){
    let cnt = 0;
  
    Array.from(this.scene.children).forEach(elem => {
        
        this.elementWidths.push(elem.clientWidth);
    
        if(cnt == 1){
         
            this.ELEMNET_WIDTH += elem.offsetLeft - this.elementWidths[0];
            this.ELEMENT_SPACE = elem.offsetLeft - this.elementWidths[0];
        }
        if(cnt == 0){
        //   /  console.log(elem.clientWidth);
            this.ELEMNET_WIDTH = elem.clientWidth;
        }
       
        cnt++;
    });

    this.viewportx = this.scene.parentElement.clientWidth;
    this.stagewidth = this.scene.clientWidth;
    this.startX = 0;
    this.startY = 0;
    this.baseX = 0;
   
   

    this.scene.parentElement.addEventListener('touchstart', (event)=>{
        let clientX = event.touches[0].clientX;
        let clientY = event.touches[0].clientY;
        this.startX = clientX;
        this.startY = clientY;
        this.baseX = this.scene.offsetLeft;
        this.scene.style.transition = "all 0s ease 0s";
        this.viewportx = this.scene.parentElement.clientWidth;

    },{passive: true});
    this.scene.parentElement.addEventListener('touchmove', (event)=>{
        let clientX = event.touches[0].clientX;
        let diff =  clientX - this.startX;
        let clientY = event.touches[0].clientY;
        let diffY =  clientY - this.startY;
        if(Math.abs(diff) > Math.abs(diffY)){
            event.preventDefault();
            this.scene.style.left = (this.baseX + diff)+"px";
        }

    });
    this.scene.parentElement.addEventListener('touchend', (event)=>{
        let maxWidth = this.ELEMNET_WIDTH * this.elementWidths.length - this.ELEMENT_SPACE;
        let clientX = event.changedTouches[0].clientX;
        let diff =  clientX - this.startX;
        diff = (Math.abs(diff) > (this.ELEMNET_WIDTH * 0.10)) ? diff: 0;
        let pl1 = diff < 0 ? -1: 0;
        diff = Math.abs(this.baseX)< this.ELEMNET_WIDTH?0:diff;
        this.posX =  Math.min(parseInt(Math.abs(this.baseX + diff) / this.ELEMNET_WIDTH) - pl1, this.elementWidths.length-1);
        this.scene.style.transition = "all 0.5s ease 0s";
        let computed = (- this.posX) * this.ELEMNET_WIDTH;
        //computed = Math.max(-1 * (this.stagewidth - this.viewportx), computed);
        computed = Math.max(-1 * (maxWidth - this.viewportx), computed);
        this.scene.style.left = computed.toString()+'px';
        if(this.callbackAfter && typeof(this.callbackAfter === 'function')){
            this.callbackAfter(this.posX, computed);
        }
        this.updateControls(computed);
   },{passive: true});

   this.scene.parentElement.addEventListener('touchcancel', (event)=>{
        clientX = event.changedTouches[0].clientX;
        //clientY = e.touches[0].clientY;

   },{passive: true});
   if(this.onLoad && typeof(this.onLoad === 'function')){
    this.onLoad(this.posX, computed);
}

}
Carousel.prototype.addAfterCallback = function(callback){
    if(callback) this.callbackAfter = callback;
}
Carousel.prototype.addControls = function(leftId, rightId){
    
    this.tempL = document.getElementById(leftId);
    this.tempR = document.getElementById(rightId);
    if(this.tempL){
        this.tempL.addEventListener('click', ()=>{this.slideLeft()},{passive: true});
    }
    if(this.tempR){
        this.tempR.addEventListener('click', ()=>{this.slideRight()},{passive: true});
        this.tempR.classList.add('disabledArrow');
    }
}
Carousel.prototype.slideLeft = function(){
 
    this.baseX = this.scene.offsetLeft;
    this.scene.style.transition = "all 0.5s ease 0s";

    let Pos = parseInt(Math.abs(this.baseX - this.ELEMNET_WIDTH) / this.ELEMNET_WIDTH);

    //let computed = this.baseX - this.ELEMNET_WIDTH;
    let computed = -1 * Pos * this.ELEMNET_WIDTH;

    computed = Math.max(-1 * (this.stagewidth - this.viewportx), computed);

    this.scene.style.left = computed.toString()+'px';
    this.updateControls(computed);
}

Carousel.prototype.slideRight = function(){

    this.baseX = this.scene.offsetLeft;
    this.scene.style.transition = "all 0.5s ease 0s";
    let Pos = parseInt(Math.abs(this.baseX + this.ELEMNET_WIDTH) / this.ELEMNET_WIDTH);
    Pos = Math.abs(this.baseX)< this.ELEMNET_WIDTH?0:Pos;
    //let computed = Math.min(this.baseX + this.ELEMNET_WIDTH, 0);
    let computed = -1 * Pos * this.ELEMNET_WIDTH;
    computed = Math.max(-1 * (this.stagewidth - this.viewportx), computed);
    this.scene.style.left = computed.toString()+'px';
    this.updateControls(computed);
}
Carousel.prototype.goto = function(posX){
    let computed = -1 * posX * this.ELEMNET_WIDTH;
    computed = Math.max(-1 * (this.stagewidth - this.viewportx), computed);
    this.scene.style.left = computed.toString()+'px';
    this.updateControls(computed);
}


Carousel.prototype.updateControls = function(value){
    if(this.tempL){
        if(value == -1 * (this.stagewidth - this.viewportx)){
            this.tempL.classList.add('disabledArrow');
        }else{
            this.tempL.classList.remove('disabledArrow');
        }
    }
    if(this.tempR){
        
        if(value == 0){
            this.tempR.classList.add('disabledArrow');
        }else{
            this.tempR.classList.remove('disabledArrow');
        }
    }
}