$(document).ready(function () {


    window.sliderResume = new Swiper('.product-resume-carousel', {
        loop: false,
        observer: true,
        navigation: {
            nextEl: '.next-product',
            prevEl: '.prev-product',
        }
    });

    new Swiper('.product-gallery-thumbnail', {
        direction: 'horizontal',
        slidesPerView: 1,
        spaceBetween: 0,
        observer: true,
        loop: false,
        navigation: {
            nextEl: '.next-thumbnail',
            prevEl: '.prev-thumbnail'
        },
        breakpoints: {
            640: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 0,
                direction: 'horizontal',
            },
            768: {
                slidesPerView: 3,
                slidesPerGroup: 3,
                spaceBetween: 10,
                direction: 'horizontal',
            },
            1024: {
                slidesPerView: 5,
                slidesPerGroup: 5,
                spaceBetween: 20,
                direction: 'vertical',
            },
        }
    });

    new Swiper('.detailsCarousel', {
        slidesPerView: 2,
        freeMode: true,
        observer: true,
        breakpoints: {
            640: {
                slidesPerView: 2,
            },
            768: {
                slidesPerView: 3,
            },
            1024: {
                slidesPerView: 4,
            },
        }
    });

    (function ($) {
        "use strict";
        $.fn.CalypsoProductSelector = function (params) {
            // Default options
            var options = $.extend({
                showProductDetailsSelector: '.show-product-details',
                dataSkuAttribute: 'data-sku',
                loadingResumeSelector: '.loading-resume-product',
                productResumeSelector: '.product-content-resume',
                btnAddCartSelector: '.add-to-cart',
                btnAddCartMobile: '.add-to-cart-product-main-mobile',
                nodeModel: params.nodeModel,
                isProductView: params.loadFirstSku || false,
                first_time: params.first_time || true,
                tabletSize: 770
            }, params);

            // Plugin variables
            var $self = this;
            var model = null;

            // Put your DOM elements here
            var elements = {
                showProductDetailsBtn: $(options.showProductDetailsSelector),
                loadingResume: $(options.loadingResumeSelector),
                productResume: $(options.productResumeSelector),
                btnAddCart: $(options.btnAddCartSelector),
                btnAddCartMobile: $(options.btnAddCartMobile)
            };

            var methods = {
                init: function () {
                    events.addToCartClick();
                    if (!options.isProductView) {
                        events.showSKUDetails();
                        events.slideChangeResume();
                    }
                    if (options.isProductView) {
                        methods.getProduct(skuJson.productId, false);
                        //methods.getProduct(404, false);
                        events.showMaterialProduct();
                        events.nextGallery();
                        events.prevGallery();
                    }

                    events.handleZoomProductResume();
                    events.closeZoomProductResume();

                },
                
                initCarouselVariationColor: function () {

                    new Swiper('.variations-colors', {
                        slidesPerView: 7,
                        spaceBetween: 10,
                        freeMode: true,
                        observer: true,
                        scrollbar: {
                            el: '.scrollbar-variations',
                        },
                        breakpoints: {
                            640: {
                                slidesPerView: 7,
                            },
                            768: {
                                slidesPerView: 7,
                            },
                            1024: {
                                slidesPerView: 10,
                            },
                        }
                    });
                },

                addToCart: function () {
                    if (model != null && !model.hasEmptyFields()) {
                        var productSKU = model.skuSelected();
                        if (productSKU != null) {
                            $.ajax({
                                url: '/checkout/cart/add?sku=' + productSKU.itemId + '&qty=' + model.quantity() + '&seller=' + productSKU.sellers[0].sellerId + '&redirect=false&sc=1',
                                beforeSend: function () {
                                    model.addingToCart(true);
                                },
                                complete: function () {

                                },
                                success: function (res) {
                                    model.addingToCart(false);
                                    closeSidebarModal('product-resume');
                                    $('#product-resume').trigger('showOrder');
                                },
                                error: function (e) {
                                    model.addingToCart(false);
                                }
                            });
                        }
                    }
                },
                getProduct: function (id, showSidebar) {
                    $.ajax({
                        url: '/api/catalog_system/pub/products/search/?fq=productId:' + id,
                        beforeSend: function () {
                            elements.loadingResume.css({
                                zIndex: 0,
                                pointerEvents: 'all'
                            });
                            elements.productResume.css({
                                opacity: 0
                            });
                            elements.loadingResume.css({
                                opacity: 1
                            });
                        },
                        complete: function () {

                        },
                        success: function (res) {
                            
                            if (showSidebar) {
                                gsap.to(elements.productResume, { duration: .3, opacity: 1, delay: .3 });
                                gsap.to(elements.loadingResume, { duration: .3, opacity: 0 });
                                elements.loadingResume.css({
                                    zIndex: -1,
                                    pointerEvents: 'none'
                                });
                            }

                            function setFirstSku() {
                                if (model.product().items.length > 0) {

                                    var minorSku = model.product().items[0];

                                    model.product().items.forEach((sku) => {
                                        if (sku.sellers[0].commertialOffer.Price < minorSku.sellers[0].commertialOffer.Price) {
                                            minorSku = sku;
                                        }
                                    });

                                    model.skuSelected(minorSku);
                                    if (minorSku.Dimensiones != null) {
                                        model.optionsSelected()['Dimensiones'] = minorSku.Dimensiones[0];
                                    }

                                    if (minorSku.Color != null) {
                                        model.optionsSelected()['Color'] = minorSku.Color[0];
                                        model.colorSelected(minorSku.Color[0]);
                                    }
                                    model.showImage(minorSku);
                                    model.name(minorSku.name);
                                    model.images(minorSku.images);
                                    minorSku['indexSku'] = 0;
                                    sliderResume.slideTo(minorSku.indexSku);
                                }
                            }

                            if (res[0].skuSpecifications != null) {
                                res[0].skuSpecifications.sort(function (a, b) {
                                    if (a.field.name > b.field.name) {
                                        return 1;
                                    }
                                    if (a.field.name < b.field.name) {
                                        return -1;
                                    }
                                    return 0;
                                });

                            }

                            if (options.first_time) {
                                options.first_time = false;
                                model = new ProductViewModel(res[0], options.isProductView);
                                setFirstSku();
                                ko.applyBindings(model, options.nodeModel);
                            } else {
                                model.resetAll(res[0]);
                            }

                            
                            if (options.isProductView) {
                                if (model.product()['Banner descripción'] != null) {
                                    $('.product-description-table .col-sm-12').addClass('col-sm-6').removeClass('col-sm-12');
                                    $('.product-description-table').prepend("<div class='col-sm-6'>" +
                                        "<img class='img-responsive' src='" + model.product()['Banner descripción'][0] + "' />" +
                                        "<span class='important-note-product-images'>Las imágenes de productos finales  solo representan una ejemplificación de como pueden ser transformados los materiales'</span>" +
                                        "</div>");
                                }


                                if (model.product()["categoriesIds"].includes("/1/") || model.product()["categoriesIds"].includes("/1/3/") || model.product()["categoriesIds"].includes("/23/")) {

                                    if (model.product()["categoriesIds"].includes("/1/3/")) {
                                        $('.material-need').text('Guía para seleccionar la mejor Espuma');
                                    }

                                    if (model.product()["categoriesIds"].includes("/23/")) {
                                        $('.material-need').text('¿Cómo calcular las medidas?');
                                        $('.guide-buttons').css({
                                            display: 'none'
                                        });
                                    }
                                    
                                    $('.material-need').css({
                                        display: 'block'
                                    });
                                } else if (!model.product()["categoriesIds"].includes("/23/") || !model.product()["Banner Material"] && !model.product()["categoriesIds"].includes("/1/3/")) {
                                    $('.material-need').css({
                                        display: 'none'
                                    });
                                }

                                checkFavoriteInView();
                                $('.icon-share').click(function (e) {
                                    helperProductShare(e.target.dataset.network, model.product().link);
                                });
                                if (window.innerWidth <= options.tabletSize) {
                                    initPhotoSwipeFromDOM('.my-gallery');
                                }
                            }
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    });
                },
                setImageResumeCarousel: function (slide) {
                    if (model != null && model.product() != null) {
                        var sku = model.product().items[slide.activeIndex];
                        model.showImage(sku);
                    }
                }
            };

            // Plugin events
            var events = {
                showSKUDetails: function () {
                    $('body').on('click', '.show-product-details', function (e) {
                        var btn = e.target;
                        var sku = null;
                        if (btn.dataset.sku == null) {
                            btn = btn.parentElement;
                            sku = btn.dataset.sku;
                        } else {
                            sku = btn.dataset.sku;
                        }
                        if (localStorage.getItem('popupCity') == '' || !getCookie('popupCity')) {
                            openModal('popup-section');
                        }
                        methods.getProduct(sku, true);
                    });
                },
                addToCartClick: function () {
                    elements.btnAddCart.click(function (e) {
                        methods.addToCart();
                    });
                    elements.btnAddCartMobile.click(function (e) {
                        methods.addToCart();
                    });
                },
                slideChangeResume: function () {
                    sliderResume.on('slideChange', function (slide) {
                        methods.setImageResumeCarousel(slide);
                    });
                },
                handleZoomProductResume: function () {
                    $('.zoom-image-resume-handle').hover(function (e) {
                        if (!$(e.target).hasClass('zoom-image-resume-close')) {
                            $('#product-resume .easyzoom').css({
                                zIndex: 2
                            });
                        }
                    }, function (e) {
                        $('#product-resume .easyzoom').css({
                            zIndex: -1
                        });
                    });
                },
                closeZoomProductResume: function () {
                    $('.zoom-image-resume-close').hover(function (e) {
                        if (e.type == 'mouseleave') {
                            $('#product-resume .easyzoom').css({
                                zIndex: 2
                            });
                        } else {
                            $('#product-resume .easyzoom').css({
                                zIndex: -1
                            });
                        }
                    });
                },
                showMaterialProduct: function () {
                    $('.material-need').click(function () {
                        if (model.product()["categoriesIds"].includes("/1/3/")) {
                            $('.material-mobile-img').attr('srcset', '/arquivos/guia-de-medidias-espumas.jpg');
                            $('.material-desktop-img').attr('src', '/arquivos/guia-de-medidias-espumas.jpg');
                            openModal('material-need-modal');
                        } else if (model.product()["categoriesIds"].includes("/1/")) {
                            $('.material-mobile-img').attr('srcset', '/arquivos/mubles.png');
                            $('.material-desktop-img').attr('src', '/arquivos/mubles.png');
                            openModal('material-need-modal');
                        } else if (model.product()["categoriesIds"].includes("/23/")) {
                            $('.material-mobile-img').attr('srcset', '/arquivos/medidas-piso-metro-lineal-mobile.jpg');
                            $('.material-desktop-img').attr('src', '/arquivos/medidas-piso-metro-lineal-desktop.jpg');
                            openModal('material-need-modal');
                        }
                    });
                },
                nextGallery: function () {
                    $('.next-slide-product').click(function () {
                        var indexGallery = model.images().findIndex(function(image) { return image.imageUrl === model.imageSelected();});
                        if (indexGallery < model.images().length - 1) {
                            indexGallery++;
                            var sku = model.images()[indexGallery];
                            model.showImage(sku);
                        }
                    });
                },
                prevGallery: function () {
                    $('.prev-slide-product').click(function () {
                        var indexGallery = model.images().findIndex(function(image) { return image.imageUrl === model.imageSelected();});
                        if (indexGallery != 0) {
                            indexGallery--;
                            var sku = model.images()[indexGallery];
                            model.showImage(sku);
                        }
                    });
                }
            };
            methods.init();
        };
    })(jQuery);


});