/* ==========================================================================
   Customer logos handler
   - Show more logos on button click.
 ========================================================================== */
export const CustomerLogosHandler = {

    customerLogosArea: null,
    amountEach: 8,

    init: function () {

        CustomerLogosHandler.customerLogosArea = document.querySelector('.js-customer-logos');

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

            Ajax.get('/api/customerLogos/slider?limit=0', CustomerLogosHandler.reorderLogos);

            // Add click event to button to load more updates
            const moreLogosButton = CustomerLogosHandler.customerLogosArea.querySelector('.js-show-more-logos');
            if(isset(moreLogosButton)){
                moreLogosButton.addEventListener('click', CustomerLogosHandler.showMoreLogos);
            }
        }
    },

    /**
     * Show more logos
     * and possibly remove more button
     */
    showMoreLogos: function () {

        // Get the hidden customer logos and remove
        const hiddenCustomerLogos = CustomerLogosHandler.customerLogosArea.querySelectorAll('.js-customer-logo.is-hidden');
        const hiddenCustomerLogosLength = hiddenCustomerLogos.length;

        // Get the amount to grab
        let amountToShow = CustomerLogosHandler.amountEach;

        // Check if the amount of hidden logos is the less or equal, equal so we know when to remove the button
        if(amountToShow >= hiddenCustomerLogosLength){

            // Overwrite the amountToShow to prevent error
            amountToShow = hiddenCustomerLogosLength;

            // Remove button area
            CustomerLogosHandler.customerLogosArea.querySelector('.js-show-more-logos-container').remove();
        }

        for(let i = 0; i < amountToShow; i++)
        {
            const hiddenCustomerLogo = hiddenCustomerLogos[i];
            hiddenCustomerLogo.classList.remove('is-hidden');
        }
    },

    reorderLogos: function (request) {

        const amountOfLogos = CustomerLogosHandler.customerLogosArea.querySelectorAll('.c-logos__item').length;
        const amountOfHiddenLogos = CustomerLogosHandler.customerLogosArea.querySelectorAll('.c-logos__item.is-hidden').length;
        const amountOfActiveLogos = amountOfLogos - amountOfHiddenLogos;

        const customerLogoList = CustomerLogosHandler.customerLogosArea.querySelector('.js-customer-logos-list');

        if(request.status === 200) {

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

            // Loop through the customer logos from the ajax response
            for(let i = 0; i < customerLogos.length; i++) {
                const customerLogo = customerLogos[i];
                const customerLogoNode = CustomerLogosHandler.customerLogosArea.querySelector('.c-logos__item[data-customer-id="' + customerLogo.id + '"]');

                // If the customer logo node is found append it to the front
                if(isset(customerLogoNode)) customerLogoList.insertBefore(customerLogoNode, customerLogoList.firstChild);
            }
        }

        // Then reset the active labels.
        const customerLogosNodes = customerLogoList.querySelectorAll('.c-logos__item');
        for(let i = 0; i < customerLogosNodes.length; i++){

            const customerLogoNode = customerLogosNodes[i];
            if(i < amountOfActiveLogos) customerLogoNode.classList.remove('is-hidden');
            else customerLogoNode.classList.add('is-hidden');
        }
    }

};