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.direction = this.rack.getAttribute('data-direction');
        this.imageLoaded = false;

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

        this.steps = [];

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

        this.calculateSteps();

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

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

        // Swipe interaction
        const swipeGestures = new Hammer(this.rack);
        swipeGestures.on('swipeleft', function () {
            console.log('swipe Left');
            self.swipeLeft();
            self.setImageRack();
        });
        swipeGestures.on('swiperight', function () {
            console.log('swipe Rith');
            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() {

        //Rest the steps array
        this.steps = [];

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

        // Calculated the available view area of the rack
        let availableViewArea;
        if(this.direction === 'ltr') availableViewArea = document.body.offsetWidth - bodyOffset.left;
        else availableViewArea = bodyOffset.left + this.rack.offsetWidth;

        // Get the racket Width
        let rackWidth;
        if(this.direction === 'ltr') rackWidth = this.items[this.items.length - 1].offsetLeft + this.items[this.items.length - 1].offsetWidth;
        else rackWidth = (this.items[this.items.length - 1].offsetLeft - this.rack.offsetWidth) * -1;
        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 offsetFromRightSide;
            let offsetFromLeftSide;

            if(this.direction === 'ltr') {
                offsetFromRightSide = item.offsetLeft + item.offsetWidth;
                offsetFromLeftSide = item.offsetLeft;
            }
            else {
                offsetFromRightSide = ((this.rack.offsetWidth * - 1) + (item.offsetLeft + item.offsetWidth)) * -1;
                offsetFromLeftSide = ((this.rack.offsetWidth * - 1) + item.offsetLeft) * -1;
            }

            // Append these offset to the offset position array
            this.steps.push(
                {
                    offsetFromLeftSide: offsetFromLeftSide,
                    offsetFromRightSide: offsetFromRightSide
                }
            );

            // Define the compare variable
            // Else we have to create a complex if statement...
            let offsetCompareVariable;
            if(this.direction === 'ltr') offsetCompareVariable = offsetFromRightSide;
            else offsetCompareVariable = offsetFromLeftSide;

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

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

        console.log(this.imageLoaded);

        // if(!imagesLoaded){
        //     console.warn("ImageRack: Recalculated width because images weren't loaded.");
        //     setTimeout(self.calculateSteps(), 4000);
        // }

    }

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

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

    // We have to use these intervene functions to swap the function when the sliders as a different direction
    swipeLeft() {
        if(this.direction === 'ltr') this.nextItem();
        else this.previousItem();
    }

    swipeRight() {
        if(this.direction === 'ltr') this.previousItem();
        else this.nextItem();
    }

    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;
        if(this.direction === 'ltr') nextOffsetPosition = '-' + this.steps[this.currentItem].offsetFromLeftSide;
        else nextOffsetPosition = this.steps[this.currentItem].offsetFromRightSide;

        this.slideArea.style.transform = 'translateX(' + nextOffsetPosition + 'px)';
    }
}

ImageRackHandler.init();