require('hammerjs');

const ImageRackHandler = {

    init: function () {
        const imageRackElements = document.querySelectorAll('.js-image-rack');
        const imageRackElementsLength = imageRackElements.length;

        for(let i = 0; i < imageRackElementsLength; i++){
            new ImageRack(imageRackElements[i]);
        }
    }
};


class ImageRack {

    constructor(imageRack) {

        const self = this;

        this.rack = imageRack;
        this.slideArea = this.rack.querySelector('.js-image-rack-slide');
        this.items  = this.rack.querySelectorAll('.js-image-rack-item');

        this.imageLoaded = false;

        this.currentItem = 0;
        this.maxItemPosition = this.items.length;
        this.maxTranslated = 0;

        this.offset = [];

        this.previousButton = this.rack.querySelector('.js-image-rack-button.previous');
        this.nextButton = this.rack.querySelector('.js-image-rack-button.next');

        this.calculateSteps();

        this.previousButton.addEventListener('click', function () {
            self.previousItem();
            self.setImageRack();
        });

        this.nextButton.addEventListener('click', function () {
            self.nextItem();
            self.setImageRack();
        });

        // Swipe interaction
        const swipeGestures = new Hammer(this.rack);
        swipeGestures.on('swipeleft', function () {
            self.swipeLeft();
            self.setImageRack();
        });
        swipeGestures.on('swiperight', function () {
            self.swipeRight();
            self.setImageRack();
        });

        this.debounceTimeout = null;
        this.waitDebounce = 500;

        // Debounce Resize
        window.addEventListener('resize', function () {
            if(isset(self.debounceTimeout)) clearTimeout(self.debounceTimeout);
            self.debounceTimeout = setTimeout(function() {
                self.calculateSteps();
                self.setImageRack();
            }, self.waitDebounce);
        });
    }

    calculateSteps() {
        //Reset the steps array
        this.offset = [];

        // Calculated the offset of the whole rack to know how much we may translate at most
        // const bodyOffset = window.bodyOffset(this.rack);
        const bodyOffset = window.bodyOffset(this.slideArea);

        // Calculated the available view area of the rack
        let availableViewArea = document.body.offsetWidth - bodyOffset.left;

        // Get the racket Width
        let rackWidth = this.items[this.items.length - 1].offsetLeft + this.items[this.items.length - 1].offsetWidth;
        this.maxTranslated = rackWidth - availableViewArea;

        let maxItemCalculated = false;
        let imagesLoaded = true;

        // Calculated for each item the offset in the rack
        for(let i = 0; i < this.items.length; i++) {
            const item = this.items[i];

            if(item.offsetWidth === 0) imagesLoaded = false;

            let offsetFromLeftSide = item.offsetLeft;

            // Append the offset to the offset position array
            this.offset.push(
                offsetFromLeftSide
            );

            // If the max translated is smaller and isn't already defined
            if(this.maxTranslated < offsetFromLeftSide && !maxItemCalculated) {
                this.maxItemPosition = (i + 1);
                maxItemCalculated = true;
            }
        }

        // Recalculated when the images aren't loaded
        if(imagesLoaded) this.imageLoaded = true;

    }

    nextItem() {
        this.currentItem++;
        if(this.currentItem >= this.maxItemPosition)  this.currentItem = this.maxItemPosition;
    }

    previousItem() {
        this.currentItem--;
        if(this.currentItem < 0) this.currentItem = 0;
    }

    swipeLeft() {
        this.nextItem();
    }

    swipeRight() {
        this.previousItem();
    }

    setImageRack() {
        // Check if image are load when interaction
        if(!this.imageLoaded){
            console.warn("ImageRack: Recalculated because images weren't loaded yet.");
            this.calculateSteps();
        }

        let nextOffsetPosition = '-' + this.offset[this.currentItem];
        this.slideArea.style.transform = 'translateX(' + nextOffsetPosition + 'px)';
    }
}

ImageRackHandler.init();