/* ==========================================================================
   Customer logos slider handler
   - Slide to next logo.
 ========================================================================== */

export const CustomerLogoSliderHandler = {

    customerLogoSliderArea: null,
    customerLogoSlides: null,
    activeLogo: 2,
    lazyLoadInstance: null,

    init: function (lazyLoadInstance) {

        CustomerLogoSliderHandler.customerLogoSliderArea = document.querySelector('.js-customer-logo-slider');
        CustomerLogoSliderHandler.lazyLoadInstance = lazyLoadInstance;

        // Only continue the init if the customer logo area is found
        if (isset(CustomerLogoSliderHandler.customerLogoSliderArea)) {

            CustomerLogoSliderHandler.replaceSources = CustomerLogoSliderHandler.customerLogoSliderArea.getAttribute('data-replace-source')
            CustomerLogoSliderHandler.hasSwipeEvents = CustomerLogoSliderHandler.customerLogoSliderArea.getAttribute('data-has-swipe-events')

                CustomerLogoSliderHandler.customerLogoSlides = CustomerLogoSliderHandler.customerLogoSliderArea.querySelectorAll('.js-customer-logo-slide');

            if (CustomerLogoSliderHandler.customerLogoSlides.length >= 5 && CustomerLogoSliderHandler.replaceSources === 'true') {
                // debugger

                // Ajax.post('/api/customerLogos/slider', CustomerLogoSliderHandler.getLogoIds(), CustomerLogoSliderHandler._loadCountryBasedLogos);
                Ajax.get('/api/customerLogos/slider', CustomerLogoSliderHandler._loadCountryBasedLogos);

            } else {
                console.log('CustomerLogoSlider: Add more customer logos to the slider');
            }

            CustomerLogoSliderHandler.addEvents();

            if (CustomerLogoSliderHandler.hasSwipeEvents === 'true') {
                CustomerLogoSliderHandler.addSwipeEvents();
            }

        }
    },

    addEvents: function () {

        const next = CustomerLogoSliderHandler.customerLogoSliderArea.querySelector('.c-customer-logo-slider__button.next');
        const previous = CustomerLogoSliderHandler.customerLogoSliderArea.querySelector('.c-customer-logo-slider__button.previous');

        next.addEventListener('click', function () {
            CustomerLogoSliderHandler.nextLogo();
            CustomerLogoSliderHandler.updateSlider();
        });
        previous.addEventListener('click', function () {
            CustomerLogoSliderHandler.previousLogo();
            CustomerLogoSliderHandler.updateSlider();
        });
    },

    addSwipeEvents: function () {

        // Swipe interaction
        const swipeGestures = new Hammer(CustomerLogoSliderHandler.customerLogoSliderArea);
        swipeGestures.on('swipeleft', function () {
            CustomerLogoSliderHandler.nextLogo();
            CustomerLogoSliderHandler.updateSlider();
        });

        swipeGestures.on('swiperight', function () {
            CustomerLogoSliderHandler.previousLogo();
            CustomerLogoSliderHandler.updateSlider();
        });

    },


    getLogoIds: function() {

        const customerLogosLength = CustomerLogoSliderHandler.customerLogoSlides.length;
        let customerLogoIds = [];

        for(let i =0; i < customerLogosLength; i++) {

            const customerLogo = CustomerLogoSliderHandler.customerLogoSlides[i];
            const customerLogoId = customerLogo.getAttribute('data-logo-id');
            customerLogoIds.push(customerLogoId);
        }

        return {ids: customerLogoIds};
    },

    finishLoading: function() {
        CustomerLogoSliderHandler.customerLogoSliderArea.querySelector('.js-customer-logo-slide-container').classList.remove('is-loading');
        CustomerLogoSliderHandler.lazyLoadInstance.update();
    },

    nextLogo: function () {
        // Increment active logo id
        CustomerLogoSliderHandler.activeLogo++;

        // If it's the same as length then reset it to zero
        if (CustomerLogoSliderHandler.activeLogo === CustomerLogoSliderHandler.customerLogoSlides.length) CustomerLogoSliderHandler.activeLogo = 0;
    },

    previousLogo: function () {

        // Decrement active logo id
        CustomerLogoSliderHandler.activeLogo--;

        // If it's below zero reset it to last item
        if (CustomerLogoSliderHandler.activeLogo < 0) CustomerLogoSliderHandler.activeLogo = CustomerLogoSliderHandler.customerLogoSlides.length - 1;

    },

    resetLogosOrder: function() {

        CustomerLogoSliderHandler.customerLogoSlides = CustomerLogoSliderHandler.customerLogoSliderArea.querySelectorAll('.js-customer-logo-slide');
        const customerLogosLength = CustomerLogoSliderHandler.customerLogoSlides.length;
        for(let i = 0; i < customerLogosLength; i++) {
            const customerLogo = CustomerLogoSliderHandler.customerLogoSlides[i];
            customerLogo.setAttribute('data-slide-id', i);
        }

        CustomerLogoSliderHandler.updateSlider();

    },

    updateSlider: function () {

        const previousLocator = CustomerLogoSliderHandler._calcPreviousPositions(3);
        const previouser = CustomerLogoSliderHandler._calcPreviousPositions(2);
        const previous = CustomerLogoSliderHandler._calcPreviousPositions(1);
        const next = CustomerLogoSliderHandler._calcNextPositions(1);
        const nexter = CustomerLogoSliderHandler._calcNextPositions(2);
        const nexterLocator = CustomerLogoSliderHandler._calcNextPositions(3);

        for (let i = 0; i < CustomerLogoSliderHandler.customerLogoSlides.length; i++) {

            const slide = CustomerLogoSliderHandler.customerLogoSlides[i];

            // Reset all possible classes
            slide.classList.remove('c-customer-logo-slider__item--pre-previous');
            slide.classList.remove('c-customer-logo-slider__item--position-1');
            slide.classList.remove('c-customer-logo-slider__item--position-2');
            slide.classList.remove('c-customer-logo-slider__item--position-3');
            slide.classList.remove('c-customer-logo-slider__item--position-4');
            slide.classList.remove('c-customer-logo-slider__item--position-5');
            slide.classList.remove('c-customer-logo-slider__item--pre-next');
            slide.classList.remove('is-hidden');

            switch (i) {
                case previousLocator:
                    slide.classList.add('c-customer-logo-slider__item--pre-previous');
                    break;
                case previouser:
                    slide.classList.add('c-customer-logo-slider__item--position-1');
                    break;
                case previous:
                    slide.classList.add('c-customer-logo-slider__item--position-2');
                    break;
                case CustomerLogoSliderHandler.activeLogo:
                    slide.classList.add('c-customer-logo-slider__item--position-3');
                    break;
                case next:
                    slide.classList.add('c-customer-logo-slider__item--position-4');
                    break;
                case nexter:
                    slide.classList.add('c-customer-logo-slider__item--position-5');
                    break;
                case nexterLocator:
                    slide.classList.add('c-customer-logo-slider__item--pre-next');
                    break;
                default:
                    slide.classList.add('is-hidden');
            }

        }

    },

    _calcPreviousPositions: function($amount) {
        let location = CustomerLogoSliderHandler.activeLogo - $amount;
        if (location < 0) return CustomerLogoSliderHandler.customerLogoSlides.length + location;
        return location
    },

    _calcNextPositions: function($amount) {
        let location = CustomerLogoSliderHandler.activeLogo + $amount;
        if(location >= CustomerLogoSliderHandler.customerLogoSlides.length) return location - CustomerLogoSliderHandler.customerLogoSlides.length;
        return location;

    },

    _loadCountryBasedLogos:function (request) {

        if(request.status === 204) {
            console.log('CustomerLogoSlider: Empty response');
            CustomerLogoSliderHandler.finishLoading();
            return;
        }

        if(request.status !== 200) {
            console.log('CustomerLogoSlider: Unexpected response ' + request.status);
            CustomerLogoSliderHandler.finishLoading();
            return;
        }

        const customerLogoResponse = JSON.parse(request.response);
        const customerLogos = customerLogoResponse.data;

        let customerLogosHtml = '';

        customerLogos.forEach(function (item) {
            customerLogosHtml = CustomerLogoSliderHandler._prepareCustomerLogoHtml(customerLogosHtml, item);

            // Check if a logo is already from generated in the cache / blade
            const alreadyRenderLogo = CustomerLogoSliderHandler.customerLogoSliderArea.querySelector('.js-customer-logo-slide[data-logo-id="' + item.id + '"]');
            if(isset(alreadyRenderLogo)){

                // console.log('delete: ' + item.id);

                // Delete if found because it would be at the end.
                alreadyRenderLogo.remove();
            }
        });

        const customerLogoContainer = CustomerLogoSliderHandler.customerLogoSliderArea.querySelector('.js-customer-logo-slide-container');
        let currentInnerHtml = customerLogoContainer.innerHTML;
        customerLogoContainer.innerHTML = customerLogosHtml + currentInnerHtml;

        CustomerLogoSliderHandler.resetLogosOrder();

        CustomerLogoSliderHandler.finishLoading();
    },

    _prepareCustomerLogoHtml: function(customerLogosHtml, customerLogo) {

        if(isset(customerLogo.url) && customerLogo.url !== '') customerLogosHtml += '<a target="_blank" rel="nofollow noopener noreferrer" href="' + customerLogo.url + '" aria-label="Go to our partners website: ' + customerLogo.url + '" ';
        else customerLogosHtml += '<div';
        customerLogosHtml += ' class="c-customer-logo-slider__item  js-customer-logo-slide" ';
        customerLogosHtml += 'data-slide-id="" data-logo-id="' + customerLogo.id + '">' +
            '<div class="c-customer-logo-slider__logo  js-lazy" data-bg="' + customerLogo.image + '"></div>';

        if(isset(customerLogo.url)  && customerLogo.url !== '') customerLogosHtml += '</a>';
        else customerLogosHtml += '</div>';

        return customerLogosHtml;

    }
};