// Toasts ----------------------------------------------------------
// Toasts ----------------------------------------------------------

const TOAST = {
    success: (message) => Toastify({
        text: message,
        duration: 2000,
        close: true,
        gravity: "top",
        position: "center",
        style: {
            background: "linear-gradient(to right, #27ae60, #2ecc71)",
            color: "white"
        },
    }).showToast(),
    error: (message) => Toastify({
        text: message,
        duration: 2000,
        close: true,
        gravity: "top",
        position: "center",
        style: {
            background: "linear-gradient(to right, #c0392b, #e74c3c)",
            color: "white"
        },
    }).showToast(),
}

function binden_autocompletar() {
    $('#binden-autocompletar-resultado').html('');
    var busca = $('#binden-autocompletar-busca').val();
    var shoppingStoreReferenceCode = '';

    if (busca.length > 2) {
        $.ajax({
            type: "GET",
            url: "/produto/busca",
            data: { q: busca, offset: 30, limit: 100, shoppingStoreReferenceCode: shoppingStoreReferenceCode },
            success: function (data) {
                var variants = data.variants;
                if (variants.length > 0) {
                    $('#binden-autocompletar-resultado').html('');
                    for (var indice in variants) {
                        var variant = variants[indice];
                        $('#binden-autocompletar-resultado').append('<div><a href="' + variant.url + '" onclick="gtag(\'event\',\'Resultado\', {\'event_category\':\'Busca\',\'event_label\':\'Termo buscado - ' + busca + '\',\'value\':1})"><div class="row"><div class="col-xs-2"><img src="' + variant.product.smallImage + '"></div><div class="col-xs-10"><strong>' + variant.product.name + '</strong><br><small>REF: ' + variant.product.referenceCode + '</small><span class="pull-right">' + parseFloat(variant.price).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) + '</span></div></div></a></div>');
                    }
                    $('#binden-autocompletar-resultado').append('<div style="background: #004371; padding: 10px"><a style="color: #ffffff !important" href="/produto/busca?q=' + busca + '"><div class="row"><div class="col-xs-12 text-center">Ver todos os produtos para a busca <strong>"' + busca + '"</strong></div></div></a></div>');
                }

                var buscaAtualizada = $('#binden-autocompletar-busca').val();

                if (buscaAtualizada.length == 0) {
                    $('#binden-autocompletar-resultado').html('');
                }
            }
        });
    } else {
        $('#binden-autocompletar-resultado').html('');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    // Carrinho Flutuante ----------------------------------------------------------
    // Carrinho Flutuante ----------------------------------------------------------

    const headerCartMenu = document.querySelector('.header-user-cart');

    if (headerCartMenu) {
        const headerCartCount = document.querySelector('.header-user-cart-count');
        const headerCartTotals = document.querySelector('.header-user-cart-totals .totals');
        const headerCartContainer = document.querySelector('.custom-floating-cart');
        const headerCartOverlay = document.querySelector('.custom-floating-cart-overlay');
        const headerCartCloseBtn = document.querySelector('.close-custom-floating-cart');
        const headerCartContent = document.querySelector('.custom-floating-cart-content');
    
        headerCartMenu.addEventListener('click', async (e) => {
            e.preventDefault();
            
            headerCartOverlay.classList.add('active');
            headerCartContainer.classList.add('active');

            await getCart();
        });
    
        headerCartCloseBtn.addEventListener('click', async (e) => {
            e.preventDefault();
    
            headerCartOverlay.classList.remove('active');
            headerCartContainer.classList.remove('active');

            await getCartTotals();
        });
    
        headerCartOverlay.addEventListener('click', async () => {
            headerCartOverlay.classList.remove('active');
            headerCartContainer.classList.remove('active');
            await getCartTotals();
        });
        
        window.addEventListener('keyup', async (e) => {
            if (e.key == 'Escape') {
                headerCartOverlay.classList.remove('active');
                headerCartContainer.classList.remove('active');
                await getCartTotals();
            }
        });

        function cartClickListeners() {
            const quantityContainers = document.querySelectorAll('.custom-floating-cart-input-quantity');

            for (let i = 0; i < quantityContainers.length; i++) {
                const container = quantityContainers[i];
                const minus = container.querySelector('.minus');
                const plus = container.querySelector('.plus');
                const input = container.querySelector('input');

                minus.addEventListener('click', async (e) => {
                    e.preventDefault();
                    
                    if (input.value <= 1) {
                        input.value = 1
                        input.setAttribute('value', 1);
                    } else {
                        input.value = Number(input.value) - 1;
                    }

                    await updateCart(input.dataset.id, input.value);
                });

                plus.addEventListener('click', async (e) => {
                    e.preventDefault();
                    
                    input.value = Number(input.value) + 1;

                    await updateCart(input.dataset.id, input.value);
                });

                input.addEventListener('blur', async () => {
                    await updateCart(input.dataset.id, input.value);
                });
            }
        
            const removeBtns = document.querySelectorAll('.custom-floating-cart-remove-item');

            for (let i = 0; i < removeBtns.length; i++) {
                const btn = removeBtns[i];
                
                btn.addEventListener('click', async (e) => {
                    e.preventDefault();

                    await destroyItem(btn.dataset.id);
                });
            }
        }

        async function updateCart(id, quantity) {
            headerCartContent.innerHTML = `
                <div class="custom-floating-cart-no-items is-flex is-align-items-center is-justify-content-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="loading-custom-floating-cart">
                        <line x1="12" y1="2" x2="12" y2="6"></line>
                        <line x1="12" y1="18" x2="12" y2="22"></line>
                        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                        <line x1="2" y1="12" x2="6" y2="12"></line>
                        <line x1="18" y1="12" x2="22" y2="12"></line>
                        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                    </svg>
                </div>
            `;

            try {
                const response = await fetch('/cart/update', {
                    method: 'POST',
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        id,
                        quantity,
                    })
                });

                const res = await response.json();

                if (res.error) {
                    alert(res.error);
                }

                await getCart();
            } catch (error) {
                alert('Não foi possível atualizar o carrinho');
                await getCart();
            }
        }

        async function destroyItem(id) {
            headerCartContent.innerHTML = `
                <div class="custom-floating-cart-no-items is-flex is-align-items-center is-justify-content-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="loading-custom-floating-cart">
                        <line x1="12" y1="2" x2="12" y2="6"></line>
                        <line x1="12" y1="18" x2="12" y2="22"></line>
                        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                        <line x1="2" y1="12" x2="6" y2="12"></line>
                        <line x1="18" y1="12" x2="22" y2="12"></line>
                        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                    </svg>
                </div>
            `;

            try {
                await fetch(`/cart/delete?id=${id}`);
                await getCart();
                TOAST.success("Item removido do carrinho");
            } catch (error) {
                alert('Não foi possível remover o produto do carrinho');
                await getCart();
            }
        }

        async function getCart() {
            headerCartContent.innerHTML = `
                <div class="custom-floating-cart-no-items is-flex is-align-items-center is-justify-content-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="loading-custom-floating-cart">
                        <line x1="12" y1="2" x2="12" y2="6"></line>
                        <line x1="12" y1="18" x2="12" y2="22"></line>
                        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                        <line x1="2" y1="12" x2="6" y2="12"></line>
                        <line x1="18" y1="12" x2="22" y2="12"></line>
                        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                    </svg>
                </div>
            `;
            
            const response = await fetch('/carrinho-flutuante')
                .then((response) => response.text())
                .then((response) => response)
                .catch((e) => {
                    console.log(e);
                });

            headerCartContent.innerHTML = response;

            setTimeout(() => {
                cartClickListeners()
            }, 400);
        }

        async function getCartTotals() {
            const response = await fetch('/checkout/current-cart');
            const res = await response.json();

            let itemsQuantityTotal = 0;
        
            for (let j = 0; j < res.sales.length; j++) {
                const sale = res.sales[j];
                
                for (let k = 0; k < sale.items.length; k++) {
                    const item = sale.items[k];
                    itemsQuantityTotal += item.quantity;
                }
            }

            headerCartCount.textContent = itemsQuantityTotal;
            headerCartTotals.textContent = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(res.totalWithDiscount);
        }

        getCartTotals();
    }

    // Carrinho Flutuante ----------------------------------------------------------
    // Carrinho Flutuante ----------------------------------------------------------


    // Menu desktop ----------------------------------------------------------
    // Menu desktop ----------------------------------------------------------

    const hasSubmenuItems = document.querySelectorAll('.has-submenu');
    const mainMenuOverlay = document.querySelector('.main-menu-overlay');

    if (hasSubmenuItems.length > 0) {
        for (let i = 0; i < hasSubmenuItems.length; i++) {
            const submenuItem = hasSubmenuItems[i];
            
            // submenuItem.addEventListener('mouseenter', () => {
            //     mainMenuOverlay.classList.add('active');
            // });
            //
            // submenuItem.addEventListener('mouseleave', () => {
            //     mainMenuOverlay.classList.remove('active');
            // });
        }
    }

    // Menu desktop ----------------------------------------------------------
    // Menu desktop ----------------------------------------------------------


    // Menu Mobile ----------------------------------------------------------
    // Menu Mobile ----------------------------------------------------------

    const mobileMenu = document.querySelector('.mobile-nav');
    const mobileMenuOverlay = document.querySelector('.mobile-nav-overlay');
    const openMenuMobileBtn = document.querySelector('.toggle-menu-mobile');
    const closeMenuMobileBtn = document.querySelector('.close-menu-mobile');
    const allMobileMenusWithChildren = document.querySelectorAll('.mobile-menu-list .has-submenu');
    const allMobileSubmenusBackBtn = document.querySelectorAll('.mobile-menu-list .mobile-submenu-back');

    if (mobileMenu) {
        function clearAllSubmenus() {
            for (let i = 0; i < allMobileMenusWithChildren.length; i++) {
                const menuItem = allMobileMenusWithChildren[i];
                const menuItemSubmenu = menuItem.querySelector('.mobile-submenu');

                menuItemSubmenu.classList.remove('active');
            }
        }

        function openMenuMobile() {
            mobileMenu.classList.add('active');
            mobileMenuOverlay.classList.add('active');
            closeMenuMobileBtn.classList.add('active');
        }

        function closeMenuMobile() {
            mobileMenu.classList.remove('active');
            mobileMenuOverlay.classList.remove('active');
            closeMenuMobileBtn.classList.remove('active');
        }

        openMenuMobileBtn.addEventListener('click', (e) => {
            e.preventDefault();
            openMenuMobile();
        });
        
        mobileMenuOverlay.addEventListener('click', (e) => {
            e.preventDefault();
            closeMenuMobile();
            clearAllSubmenus();
        });
        
        closeMenuMobileBtn.addEventListener('click', (e) => {
            e.preventDefault();
            closeMenuMobile();
            clearAllSubmenus();
        });

        for (let i = 0; i < allMobileMenusWithChildren.length; i++) {
            const menuItem = allMobileMenusWithChildren[i];
            const menuItemSubmenu = menuItem.querySelector('.mobile-submenu');
            const menuItemBtn = menuItem.querySelector('.mobile-submenu-activator');
    
            menuItemBtn.addEventListener('click', (e) => {
                e.preventDefault();
    
                menuItemSubmenu.classList.add('active');
            });
        }
    
        for (let i = 0; i < allMobileSubmenusBackBtn.length; i++) {
            const submenuBackBtn = allMobileSubmenusBackBtn[i];
            
            submenuBackBtn.addEventListener('click', (e) => {
                e.preventDefault();
    
                submenuBackBtn.closest('.mobile-submenu').classList.remove('active');
            });
        }
    }

    // Menu Mobile ----------------------------------------------------------
    // Menu Mobile ----------------------------------------------------------

    // Menu User ----------------------------------------------------------
    // Menu User ----------------------------------------------------------

    const userMenu = document.querySelector('.user-account-menu');

    if (userMenu) {
        const userMenuOverlay = document.querySelector('.user-account-overlay');
        const openUserMenu = document.querySelector('.open-user-account .submenu-activator');
        const closeUserMenu = document.querySelector('.close-user-account');

        openUserMenu.addEventListener('click', (e) => {
            e.preventDefault();

            userMenuOverlay.classList.add('active');
            userMenu.classList.add('active');
        });

        closeUserMenu.addEventListener('click', (e) => {
            e.preventDefault();

            userMenuOverlay.classList.remove('active');
            userMenu.classList.remove('active');
        });

        userMenuOverlay.addEventListener('click', (e) => {
            e.preventDefault();

            userMenuOverlay.classList.remove('active');
            userMenu.classList.remove('active');
        });

        window.addEventListener('keyup', (e) => {
            if (e.key == 'Escape') {
                userMenuOverlay.classList.remove('active');
                userMenu.classList.remove('active');
            }
        });
    }


    // Menu User ----------------------------------------------------------
    // Menu User ----------------------------------------------------------

    // Footer ----------------------------------------------------------
    // Footer ----------------------------------------------------------

    if (window.innerWidth < 1024) {
        const footerMenus = document.querySelectorAll('.footer-menu');
    
        for (let i = 0; i < footerMenus.length; i++) {
            const menu = footerMenus[i];
            const toggleMenu = menu.querySelector('h5');
            const submenu = menu.querySelector('.footer-menu-list');
            const submenuOriginalHeight = submenu.offsetHeight;
    
            submenu.style.height = '0px';
            
            toggleMenu.addEventListener('click', (e) => {
                e.preventDefault();
    
                if (menu.classList.contains('active')) {
                    menu.classList.remove('active');
                    submenu.style.height = '0px';
                } else {
                    menu.classList.add('active');
                    submenu.style.height = `${submenuOriginalHeight}px`;
                }
            });
        }
    }

    const news = document.querySelectorAll('.footer-news');

    if (news.length > 0) {
        for (let i = 0; i < news.length; i++) {
            const newsCont = news[i];
            const inputEmail = newsCont.querySelector('input');
            const btn = newsCont.querySelector('button');
            
            btn.addEventListener('click', async (e) => {
                e.preventDefault();

                await fetch('/newsletter/subscribe', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        'newsletter[email]': inputEmail.value
                    }),
                }).then(() => {
                    alert('Inscrição feita com sucesso!');
                }).catch((e) => {
                    console.error(e);
                    alert('Ocorreu um problema, tente novamente.')
                })
            });
        }
    }

    // Footer ----------------------------------------------------------
    // Footer ----------------------------------------------------------
    
    // Customs ----------------------------------------------------------
    // Customs ----------------------------------------------------------

    const agentLinkButtons = document.querySelectorAll('.f2-agent-promotional-link-click');

    if (agentLinkButtons.length > 0) {
        for (let i = 0; i < agentLinkButtons.length; i++) {
            const button = agentLinkButtons[i];
            
            button.addEventListener('click', (e) => {
                e.preventDefault();
                
                const agentLink = document.querySelector('.f2-agent-promotional-link');

                const input = document.createElement('input');
                document.body.appendChild(input);
                input.classList.add('agent-link-copy');
                input.value = agentLink.innerHTML;
                input.select();
                document.execCommand('copy');
                document.body.removeChild(input);
                alert("O link desta página com a sua indicação foi salvo na sua área de transferência");
            });
        }
    }

    // Customs ----------------------------------------------------------
    // Customs ----------------------------------------------------------
});